/* ============================================================
   Fiflouu Design System — Core Tokens
   Colors derived from two brand anchors:
     - Purple  #5F3D94  (wordmark "fiflo")
     - Green   #03AA6F  (symbol "uu" wave)
   Typography: Inter Variable (primary, loaded locally from /fonts),
               JetBrains Mono (code, loaded from Google Fonts in HTML)
   ============================================================ */

/* Brand sans — Inter Variable (optical size + weight axes) */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------
     BRAND — PURPLE (primary)
     Generated as an OKLCH-balanced ramp around #5F3D94
     ------------------------------------------------------------ */
  --purple-50:  #F4F0FB;
  --purple-100: #E7DFF6;
  --purple-200: #CFBEEB;
  --purple-300: #B39BDE;
  --purple-400: #9175C9;
  --purple-500: #7553B4;
  --purple-600: #5F3D94;  /* BRAND PRIMARY */
  --purple-700: #4D3179;
  --purple-800: #3B2560;
  --purple-900: #2A1A45;
  --purple-950: #1A1030;

  /* ------------------------------------------------------------
     BRAND — GREEN (secondary)
     Ramp around #03AA6F
     ------------------------------------------------------------ */
  --green-50:  #E6F9F1;
  --green-100: #C4F1DD;
  --green-200: #8CE3BE;
  --green-300: #4FD19E;
  --green-400: #1FBD83;
  --green-500: #03AA6F;  /* BRAND SECONDARY */
  --green-600: #028F5D;
  --green-700: #01734A;
  --green-800: #015537;
  --green-900: #003A25;

  /* ------------------------------------------------------------
     NEUTRALS — slightly warm, very slightly purple-leaning
     ------------------------------------------------------------ */
  --gray-0:   #FFFFFF;
  --gray-50:  #FAFAFB;
  --gray-100: #F3F3F6;
  --gray-200: #E7E7EC;
  --gray-300: #D2D2DA;
  --gray-400: #A8A8B3;
  --gray-500: #787885;
  --gray-600: #55555F;
  --gray-700: #3B3B44;
  --gray-800: #26262C;
  --gray-900: #18181C;
  --gray-950: #0D0D10;

  /* ------------------------------------------------------------
     SEMANTIC — success / error / warning / info
     success uses the brand green; others chosen to harmonize
     ------------------------------------------------------------ */
  --success-50:  #E6F9F1;
  --success-500: #03AA6F;
  --success-600: #028F5D;
  --success-700: #01734A;

  --error-50:    #FDECEC;
  --error-500:   #DC3545;
  --error-600:   #B8232F;
  --error-700:   #8E1A25;

  --warning-50:  #FFF4E0;
  --warning-500: #F2A93B;
  --warning-600: #CC8920;
  --warning-700: #9E6614;

  --info-50:     #E8F1FD;
  --info-500:    #2E7CE6;
  --info-600:    #1F62C2;
  --info-700:    #154A98;

  /* ------------------------------------------------------------
     SEMANTIC ROLES — LIGHT THEME (default)
     ------------------------------------------------------------ */
  --bg-canvas:     var(--gray-50);
  --bg-surface:    var(--gray-0);
  --bg-raised:     var(--gray-0);
  --bg-sunken:     var(--gray-100);
  --bg-inverse:    var(--gray-900);
  --bg-brand:      var(--purple-600);
  --bg-brand-soft: var(--purple-50);
  --bg-accent:     var(--green-500);
  --bg-accent-soft:var(--green-50);

  --fg-1: var(--gray-900);     /* primary text */
  --fg-2: var(--gray-700);     /* secondary text */
  --fg-3: var(--gray-500);     /* tertiary / captions */
  --fg-4: var(--gray-400);     /* placeholder / disabled */
  --fg-inverse: var(--gray-0);
  --fg-brand:   var(--purple-600);
  --fg-accent:  var(--green-600);
  --fg-link:    var(--purple-600);

  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-brand:   var(--purple-600);
  --border-focus:   var(--purple-500);

  /* ------------------------------------------------------------
     RADII — geometric but friendly; matches the logo's rounded feel
     ------------------------------------------------------------ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ------------------------------------------------------------
     SHADOWS — soft, layered; low saturation
     Brand shadow uses a tiny hint of purple
     ------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(24,24,28,0.04);
  --shadow-sm: 0 1px 3px rgba(24,24,28,0.06), 0 1px 2px rgba(24,24,28,0.04);
  --shadow-md: 0 4px 12px rgba(24,24,28,0.06), 0 2px 4px rgba(24,24,28,0.04);
  --shadow-lg: 0 12px 28px rgba(24,24,28,0.08), 0 4px 10px rgba(24,24,28,0.04);
  --shadow-xl: 0 24px 48px rgba(24,24,28,0.12), 0 8px 16px rgba(24,24,28,0.06);
  --shadow-brand: 0 8px 24px rgba(95, 61, 148, 0.18);
  --shadow-accent: 0 8px 24px rgba(3, 170, 111, 0.20);
  --shadow-inner: inset 0 1px 2px rgba(24,24,28,0.06);
  --ring-focus: 0 0 0 3px rgba(95, 61, 148, 0.25);

  /* ------------------------------------------------------------
     SPACING — 4px base grid
     ------------------------------------------------------------ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ------------------------------------------------------------
     TYPOGRAPHY — base
     ------------------------------------------------------------ */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* same family, heavier weights */

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Sizes — modular scale, base 16 */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;
  --fs-6xl:  76px;

  /* Line-heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter-spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.06em;

  /* ------------------------------------------------------------
     MOTION
     ------------------------------------------------------------ */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --dur-slower: 480ms;
}

/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme='dark'] {
  --bg-canvas:  var(--gray-950);
  --bg-surface: var(--gray-900);
  --bg-raised:  var(--gray-800);
  --bg-sunken:  var(--gray-950);
  --bg-inverse: var(--gray-0);
  --bg-brand-soft: rgba(117, 83, 180, 0.12);
  --bg-accent-soft: rgba(3, 170, 111, 0.12);

  --fg-1: var(--gray-50);
  --fg-2: var(--gray-300);
  --fg-3: var(--gray-400);
  --fg-4: var(--gray-500);
  --fg-inverse: var(--gray-900);
  --fg-brand:  var(--purple-300);
  --fg-accent: var(--green-300);
  --fg-link:   var(--purple-300);

  --border-subtle:  rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.18);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.45), 0 4px 10px rgba(0,0,0,0.3);
  --shadow-xl: 0 24px 48px rgba(0,0,0,0.5), 0 8px 16px rgba(0,0,0,0.35);
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   (Apply these classes, not raw tokens, whenever possible)
   ============================================================ */
.display-1,
.display-2,
.h1, .h2, .h3, .h4, .h5, .h6,
.body, .body-lg, .body-sm,
.caption, .overline, .code, .quote {
  font-family: var(--font-sans);
  color: var(--fg-1);
  margin: 0;
}

.display-1 {
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
}
.display-2 {
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.h1 {
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.h2 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.h3 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
}
.h4 {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
}
.h5 {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
}
.h6 {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
}
.body-lg {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  color: var(--fg-2);
}
.body {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  color: var(--fg-2);
}
.body-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  color: var(--fg-2);
}
.caption {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  font-weight: var(--fw-medium);
  color: var(--fg-3);
}
.overline {
  font-size: var(--fs-xs);
  line-height: 1;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}
.code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  border-radius: var(--radius-xs);
  padding: 0.15em 0.4em;
}
.quote {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  font-style: italic;
}

/* base page styling helper */
.fiflouu-root {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
}