/* =============================================================
* Aisee Theme
* Design tokens scraped from https://aisee.ai
* Use these CSS custom properties anywhere in this repo so the
* visual language stays consistent with the marketing site.
* ============================================================= */
/* --- Fonts (must be loaded in before this stylesheet) ----
*
*
*
*
* -------------------------------------------------------------- */
:root {
/* ---------- Brand palette ---------- */
--aisee-purple: #7A6BB5; /* primary brand */
--aisee-ink: #262238; /* near-black navy/purple */
--aisee-ink-50: rgba(38, 34, 56, 0.5);
--aisee-ink-70: rgba(38, 34, 56, 0.7);
--aisee-ink-b3: rgba(38, 34, 56, 0.7);
--aisee-bg: #FAFAFA; /* page bg, light */
--aisee-surface: #F3F3F3; /* card / chip bg */
--aisee-white: #ffffff;
--aisee-black: #000000;
/* Slate ramp (oklch sourced from Tailwind v4 defaults) */
--color-slate-100: oklch(96.8% 0.007 247.896);
--color-slate-300: oklch(86.9% 0.022 252.894);
--color-slate-400: oklch(70.4% 0.04 256.788);
--color-slate-500: oklch(55.4% 0.046 257.417);
--color-slate-600: oklch(44.6% 0.043 257.281);
--color-slate-700: oklch(37.2% 0.044 257.287);
--color-slate-900: oklch(20.8% 0.042 265.755);
/* Accents from the marketing site */
--color-violet-300: oklch(81.1% 0.111 293.571);
--color-violet-400: oklch(70.2% 0.183 293.541);
--color-red-200: oklch(88.5% 0.062 18.334);
/* Semantic aliases — prefer these in components */
--color-bg: var(--aisee-bg);
--color-surface: var(--aisee-surface);
--color-fg: var(--aisee-ink);
--color-fg-muted: var(--aisee-ink-70);
--color-primary: var(--aisee-purple);
--color-on-primary: var(--aisee-white);
--color-border: var(--color-slate-100);
--color-ring: var(--color-violet-400);
/* ---------- Typography ---------- */
--font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--font-display: "Chillax", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
--text-6xl: 3.75rem;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--tracking-tight: -0.025em;
/* ---------- Spacing / sizing ---------- */
--spacing: 0.25rem; /* base unit; *.5rem = 2, *1rem = 4 ... */
--container-md: 28rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--container-7xl: 80rem;
/* ---------- Radius ---------- */
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
/* ---------- Shadow ---------- */
--shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
--shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.10);
/* ---------- Motion ---------- */
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 0.15s;
--duration-base: 0.2s;
--duration-slow: 1.5s;
/* ---------- Gradients (signature dark vignette from the site) ---------- */
--gradient-ink-vignette:
linear-gradient(to top, var(--aisee-ink) 0%, var(--aisee-ink-50) 40%, transparent 100%);
/* Default font on */
font-family: var(--font-sans);
}
/* ---------- Base reset (light-touch, matches site behavior) ---------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--color-fg);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: var(--font-weight-bold);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
margin: 0;
}
a {
color: var(--color-primary);
text-decoration: none;
transition: opacity var(--duration-fast) var(--ease-in-out);
}
a:hover { opacity: 0.8; }
/* ---------- Reusable primitives ---------- */
.aisee-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: calc(var(--spacing) * 2);
padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5);
border: 0;
border-radius: var(--radius-full);
font-family: var(--font-sans);
font-weight: var(--font-weight-semibold);
font-size: var(--text-base);
background-color: var(--color-primary);
color: var(--color-on-primary);
cursor: pointer;
transition: opacity var(--duration-fast) var(--ease-in-out),
transform var(--duration-fast) var(--ease-out);
}
.aisee-btn:hover:not(:disabled) { opacity: 0.9; }
.aisee-btn:active:not(:disabled) { transform: scale(0.98); }
.aisee-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-ring) 60%, transparent);
}
.aisee-btn:disabled {
opacity: 0.65;
cursor: not-allowed;
}
/* Loading state — keep button width stable, hide label, show spinner. */
.aisee-btn.is-loading { color: transparent; pointer-events: none; }
.aisee-btn.is-loading .aisee-spinner { display: inline-block; }
.aisee-spinner {
display: none;
position: absolute;
width: 1.125em;
height: 1.125em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: aisee-spin 0.7s linear infinite;
color: var(--color-on-primary);
}
.aisee-btn { position: relative; }
@keyframes aisee-spin { to { transform: rotate(360deg); } }
.aisee-card {
background-color: var(--aisee-white);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-xl);
padding: calc(var(--spacing) * 8);
}