/* ============================================================
   FATAPLUS BRAND SPECIFIC TOKENS
   Atoms: Colors, typography scales, specific shadows.
   This can be swapped out to customize themes or create other brands.
   ============================================================ */

:root {
  /* ============================================================
     COLORS (FATAPLUS spec)
     ============================================================ */
  --ink: #08040A;              /* Hot black/dark violet. Base dark */
  --brand: #08583F;            /* Vert logo */
  --brand-secondary: #0B6E4F;  /* Vert accent, links */
  --brand-light: #CEE2DB;      /* Vert hover pale */
  --brand-lighter: #E6F0ED;    /* Surface content pale */
  --brand-dark: #032117;       /* Dark section background */
  --brand-darker: #042C1F;     /* Deep immersion green */

  /* Accents categoriques */
  --accent-coral: #CC6147;
  --accent-coral-bright: #FF7262;
  --accent-coral-light: #FFA18A;
  --accent-coral-bg: #FFE4DD;
  --accent-purple: #7B3C99;
  --accent-purple-bright: #9A4CC0;
  --accent-purple-bg: #EADBF2;
  --accent-blue: #224B86;
  --accent-blue-bright: #2B5EA8;
  --accent-blue-bg: #D4DEED;

  /* Neutrals */
  --white: #FFFFFF;
  --neutral-50: #F1F0EE;
  --neutral-100: #F2F2F2;
  --neutral-200: #D9D9DA;
  --neutral-400: #B4B3B5;
  --neutral-500: #838184;
  --neutral-700: #524F53;
  --neutral-900: #201D22;
  --neutral-950: #161616;

  /* Overlay states */
  --overlay-light: rgba(8, 4, 10, 0.15);
  --overlay-medium: rgba(8, 4, 10, 0.60);
  --overlay-dark: rgba(0, 0, 0, 0.40);
  --overlay-hover: rgba(0, 0, 0, 0.10);
  --border-subtle: rgba(8, 4, 10, 0.15);
  --border-dark: rgba(255, 255, 255, 0.20);
  --border-brand: #0B6E4F;
  --border-emphasized: #08040A;

  /* ============================================================
     TYPOGRAPHY SCALE (FATAPLUS specific)
     BIZ UDPMincho (expressive serif) + Inter (safe/clean sans)
     ============================================================ */
  --font-family-display: 'BIZ UDPMincho', Georgia, 'Times New Roman', serif;
  --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'Roboto Mono', 'SF Mono', Monaco, Consolas, monospace;

  /* Fluid text scaling */
  --font-display: clamp(2.5rem, 8vw, 5.25rem);   /* 84px */
  --font-display-lh: 1.1;
  --font-display-ls: -0.84px;

  --font-h1: clamp(2rem, 5vw, 3.75rem);           /* 60px */
  --font-h1-lh: 1.2;
  --font-h1-ls: -0.6px;

  --font-h2: clamp(1.5rem, 4vw, 3rem);            /* 48px */
  --font-h2-lh: 1.3;
  --font-h2-ls: -0.48px;

  --font-h3: clamp(1.25rem, 3vw, 2rem);           /* 32px max */
  --font-h3-lh: 1.3;
  --font-h3-ls: -0.32px;

  --font-h4: clamp(1.125rem, 2vw, 1.625rem);      /* 26px max */
  --font-h4-lh: 1.5;

  --font-body: clamp(1rem, 1.5vw, 1.125rem);      /* 18px max */
  --font-body-lh: 1.5;

  --font-ui: 1rem;                                /* 16px */
  --font-ui-lh: 1.5;

  --font-label: 1rem;                             /* 16px, weight 600 */
  --font-caption: 0.875rem;                       /* 14px */
  --font-tiny: 0.75rem;                           /* 12px */

  --font-stat: clamp(3rem, 7vw, 5rem);            /* 80px */
  --font-stat-lh: 1.0;
  --font-stat-ls: -0.8px;

  /* ============================================================
     SHADOWS (FATAPLUS specific)
     ============================================================ */
  --shadow-xxsmall: 0 1px 1.75px 0 rgba(0, 0, 0, 0.051);
  --shadow-xsmall: 0 1px 1.75px 0 rgba(0, 0, 0, 0.059), 0 1px 2.625px 0 rgba(0, 0, 0, 0.102);
  --shadow-small: 0 2px 3.5px -2px rgba(0, 0, 0, 0.059), 0 4px 7px -2px rgba(0, 0, 0, 0.102);
  --shadow-medium: 0 4px 5.25px -2px rgba(0, 0, 0, 0.031), 0 12px 14px -4px rgba(0, 0, 0, 0.078);
  --shadow-large: 0 8px 7px -4px rgba(0, 0, 0, 0.031), 0 20px 21px -4px rgba(0, 0, 0, 0.078);
  --shadow-xlarge: 0 24px 42px -12px rgba(0, 0, 0, 0.180);
  --shadow-xxlarge: 0 32px 56px -12px rgba(0, 0, 0, 0.141);
}

/* Base Light/Dark theme mappings built off tokens */
:root[data-theme="dark"] {
  --bg-body: var(--ink);
  --bg-surface: var(--neutral-950);
  --bg-elevated: var(--neutral-900);
  --text-primary: var(--white);
  --text-secondary: var(--neutral-400);
  --text-tertiary: var(--neutral-500);
  --border-default: var(--border-dark);
  --border-hover: rgba(255, 255, 255, 0.15);
}

:root[data-theme="light"],
:root {
  --bg-body: var(--white);
  --bg-surface: var(--neutral-50);
  --bg-elevated: var(--white);
  --text-primary: var(--ink);
  --text-secondary: var(--neutral-700);
  --text-tertiary: var(--neutral-500);
  --border-default: var(--border-subtle);
  --border-hover: rgba(8, 4, 10, 0.25);
}