/**
 * Lenglish design tokens — GL-003.
 *
 * GL-003 is the authoritative Lenglish design system. Its reference
 * implementation lives in the LMS at src/app/globals.css; this file mirrors
 * it for the static marketing site so both surfaces resolve the same names
 * to the same values. Variable names match one-for-one on purpose: a value
 * changed in one place has exactly one counterpart to change in the other.
 *
 * Typography is not expressible as tokens here — the faces are loaded per
 * page. Both surfaces use Lilita One (display), Bricolage Grotesque
 * (eyebrow) and Figtree (body/UI).
 *
 * Consumed by: index.html, brand.html
 */

:root {
  /* Let the UA theme scrollbars and form controls with the page. */
  color-scheme: light dark;

  /* ── GL-003 palette (confirmed hex from the A2 session deck) ──
     Brand hues: identical in both themes, never remapped. */
  --gl-charcoal: #232323;
  --gl-navy: #05014d;
  --gl-cream: #fff6f5;
  --gl-pink: #ff69a0;
  --gl-lime: #bcd539;
  --gl-lavender: #d2b5f7;
  --gl-periwinkle: #a4c8ee;
  --gl-amber: #fbb732;
  --gl-underline: #e53e74; /* target-language underline ONLY */
  --gl-shadow: #725760; /* Lilita One soft drop-shadow ONLY */

  /* The recurring rainbow bar — the palette as "one gradient family". */
  --gl-gradient: linear-gradient(
    90deg,
    #634b9f,
    #8aa2e0,
    #a1d1db,
    #afdc99,
    #bad546,
    #e0cd07,
    #feb113,
    #f17628,
    #ff6ca3
  );

  /* ── Named brand hues ──
     Lime is the deck value #BCD539. The marketing site's older #A9C93B is
     retired; GL-003 wins. */
  --brand-lime: #bcd539;
  --brand-lime-deep: #9db523;
  --brand-ink: #1a1a1a;
  --brand-purple: #6b4fa0;
  --brand-purple-deep: #4d3778;
  --brand-orange: #e05a32;
  --brand-pink: #e84e6e;
  --brand-yellow: #f2b030;
  --brand-blue: #8bb8d8;

  /* Soft card washes. */
  --brand-tint-lime: #eef5d0;
  --brand-tint-purple: #f0e8f8;
  --brand-tint-blue: #e8f3fd;
  --brand-tint-sand: #f5e8df;
  --brand-tint-cream: #fdf0d6;

  /* CEFR chips, as bg/fg pairs so both themes read the same names. */
  --cefr-a1-bg: #eef5d0;
  --cefr-a1-fg: #3f4a12;
  --cefr-a2-bg: #fdf0d6;
  --cefr-a2-fg: #7a5504;
  --cefr-b1-bg: #e8f3fd;
  --cefr-b1-fg: #2c5a7a;
  --cefr-b2-bg: #f0e8f8;
  --cefr-b2-fg: #4d3778;
  --cefr-c1-bg: #f5e8df;
  --cefr-c1-fg: #b3421f;
  --cefr-c2-bg: #fbe7de;
  --cefr-c2-fg: #b3341a;

  /* ── Semantic surfaces (light) ── */
  --background: #ffffff;
  --foreground: #1a1a1a;
  --card: #ffffff;
  --card-foreground: #1a1a1a;

  /* Ink fill for primary actions — keeps contrast high. Lime is the accent,
     not the default button. */
  --primary: #1a1a1a;
  --primary-foreground: #ffffff;

  --secondary: #eef5d0;
  --secondary-foreground: #3f4a12;

  --muted: #f6f5f3;
  --muted-foreground: #6b5d54;

  --accent: #bcd539;
  --accent-foreground: #1a1a1a;

  --destructive: #e84e6e;
  --border: #e9e6e2;
  --input: #e0dcd7;
  --ring: #bcd539;

  /* Pill buttons. --radius drives cards; buttons use --pill. */
  --radius: 0.875rem;
  --radius-card: 1.575rem; /* --radius * 1.8, the LMS rounded-2xl card */
  --pill: 100px;
}

/**
 * Dark palette. Values live once in --d-*; the selectors below only assign
 * them, so there is a single source of truth — same structure as the LMS.
 *
 * Warm charcoal rather than pure grey, to sit with Figtree and the brand's
 * warm neutrals. Lime becomes the primary fill in dark: it is the one brand
 * colour with enough punch against a dark ground.
 */
:root {
  --d-background: #201f1d;
  --d-foreground: #f2efe9;
  --d-card: #2b2a27;
  --d-muted: #33322e;
  --d-muted-foreground: #b1aaa0;
  --d-border: #3c3b34;
  --d-input: #45443d;

  --d-primary: #bcd539;
  --d-primary-foreground: #14170a;
  --d-secondary: #2a2f1c;
  --d-secondary-foreground: #d3e08f;
  --d-accent: #bcd539;
  --d-accent-foreground: #14170a;
  --d-destructive: #f4718c;

  /* Card washes: the light pastels are far too bright on dark, so each
     becomes a deep, desaturated version of the same hue. */
  --d-tint-lime: #232a16;
  --d-tint-purple: #241d33;
  --d-tint-blue: #16232e;
  --d-tint-sand: #2b211a;
  --d-tint-cream: #2d2617;

  /* CEFR chips: deep ground + light ink of the same hue. */
  --d-cefr-a1-bg: #232a16;
  --d-cefr-a1-fg: #c3dc6b;
  --d-cefr-a2-bg: #2d2617;
  --d-cefr-a2-fg: #e8bc5c;
  --d-cefr-b1-bg: #16232e;
  --d-cefr-b1-fg: #8bb8d8;
  --d-cefr-b2-bg: #241d33;
  --d-cefr-b2-fg: #b79ae0;
  --d-cefr-c1-bg: #2b211a;
  --d-cefr-c1-fg: #f08a63;
  --d-cefr-c2-bg: #301b1c;
  --d-cefr-c2-fg: #f4718c;
}

@media (prefers-color-scheme: dark) {
  /* `.light` lets a future toggle force light against the OS setting. */
  :root:not(.light) {
    --background: var(--d-background);
    --foreground: var(--d-foreground);
    --card: var(--d-card);
    --card-foreground: var(--d-foreground);
    --primary: var(--d-primary);
    --primary-foreground: var(--d-primary-foreground);
    --secondary: var(--d-secondary);
    --secondary-foreground: var(--d-secondary-foreground);
    --muted: var(--d-muted);
    --muted-foreground: var(--d-muted-foreground);
    --accent: var(--d-accent);
    --accent-foreground: var(--d-accent-foreground);
    --destructive: var(--d-destructive);
    --border: var(--d-border);
    --input: var(--d-input);
    --ring: var(--d-primary);

    --brand-tint-lime: var(--d-tint-lime);
    --brand-tint-purple: var(--d-tint-purple);
    --brand-tint-blue: var(--d-tint-blue);
    --brand-tint-sand: var(--d-tint-sand);
    --brand-tint-cream: var(--d-tint-cream);

    --cefr-a1-bg: var(--d-cefr-a1-bg);
    --cefr-a1-fg: var(--d-cefr-a1-fg);
    --cefr-a2-bg: var(--d-cefr-a2-bg);
    --cefr-a2-fg: var(--d-cefr-a2-fg);
    --cefr-b1-bg: var(--d-cefr-b1-bg);
    --cefr-b1-fg: var(--d-cefr-b1-fg);
    --cefr-b2-bg: var(--d-cefr-b2-bg);
    --cefr-b2-fg: var(--d-cefr-b2-fg);
    --cefr-c1-bg: var(--d-cefr-c1-bg);
    --cefr-c1-fg: var(--d-cefr-c1-fg);
    --cefr-c2-bg: var(--d-cefr-c2-bg);
    --cefr-c2-fg: var(--d-cefr-c2-fg);
  }
}

/* Explicit override, for a manual toggle. */
.dark {
  --background: var(--d-background);
  --foreground: var(--d-foreground);
  --card: var(--d-card);
  --card-foreground: var(--d-foreground);
  --primary: var(--d-primary);
  --primary-foreground: var(--d-primary-foreground);
  --secondary: var(--d-secondary);
  --secondary-foreground: var(--d-secondary-foreground);
  --muted: var(--d-muted);
  --muted-foreground: var(--d-muted-foreground);
  --accent: var(--d-accent);
  --accent-foreground: var(--d-accent-foreground);
  --destructive: var(--d-destructive);
  --border: var(--d-border);
  --input: var(--d-input);
  --ring: var(--d-primary);

  --brand-tint-lime: var(--d-tint-lime);
  --brand-tint-purple: var(--d-tint-purple);
  --brand-tint-blue: var(--d-tint-blue);
  --brand-tint-sand: var(--d-tint-sand);
  --brand-tint-cream: var(--d-tint-cream);

  --cefr-a1-bg: var(--d-cefr-a1-bg);
  --cefr-a1-fg: var(--d-cefr-a1-fg);
  --cefr-a2-bg: var(--d-cefr-a2-bg);
  --cefr-a2-fg: var(--d-cefr-a2-fg);
  --cefr-b1-bg: var(--d-cefr-b1-bg);
  --cefr-b1-fg: var(--d-cefr-b1-fg);
  --cefr-b2-bg: var(--d-cefr-b2-bg);
  --cefr-b2-fg: var(--d-cefr-b2-fg);
  --cefr-c1-bg: var(--d-cefr-c1-bg);
  --cefr-c1-fg: var(--d-cefr-c1-fg);
  --cefr-c2-bg: var(--d-cefr-c2-bg);
  --cefr-c2-fg: var(--d-cefr-c2-fg);
}

/**
 * Theme-swapped logo. The wordmark is a solid colour, so it needs a black
 * cut on the light ground and a white cut on the dark one. Mirrors the
 * .logo-on-light / .logo-on-dark utilities in the LMS.
 */
.logo-on-light { display: block; }
.logo-on-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not(.light) .logo-on-light { display: none; }
  :root:not(.light) .logo-on-dark { display: block; }
}

.dark .logo-on-light { display: none; }
.dark .logo-on-dark { display: block; }