@charset "UTF-8";
/* ============================================================
   Kyne Labs — Design Tokens
   Phase 2.5: brand color system.

   FOUR LAYERS
     L1  Skeleton       type, space, shape. Brand-independent. Never varies.
     L2  Brand palettes Raw brand hexes, named by brand + colour name.
                        These are the source of truth. Do not invent new ones.
     L3  Role tokens    What components actually consume. Semantic, not colour
                        --cta-bg, --cta-text, --cta-bg-hover, --band-bg, --band-text,
     --band-text-muted, --band-button-*, --hero-from, --hero-to.
     L4  Scopes         Each brand / product maps L2 -> L3.

   RULES
   - Components must only ever reference L3 role tokens. Never an L2 hex,
     never a raw colour name.
   - A brand scope may only remap L3. It must not touch L1.
   - Every derived value (-d suffix or documented below) exists because the
     raw brand colour failed WCAG AA for that role. verify.py enforces this.
   ============================================================ */

:root {
  /* ---------- L1 Skeleton ---------- */
  --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Editorial serif — Celfavia scope only. System stack, zero remote fonts. */
  --font-editorial: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --leading: 1.7;
  --leading-tight: 1.18;
  --tracking-tight: -0.035em;
  --tracking-wide: 0.14em;

  --measure: 68ch;
  --page-max: 1160px;
  --gutter: 28px;
  --gutter-sm: 20px;

  --space-section: 64px;
  --space-section-sm: 44px;
  --radius: 20px;
  --radius-sm: 14px;
  --radius-pill: 100px;
  --tap-min: 44px;

  /* ---------- L2 Brand palettes (raw, confirmed) ---------- */

  /* Kyne Labs — parent */
  --kyne-labs-pale-gray: #EBEBDD;
  --kyne-labs-rich-blue: #191265;

  /* Celfavia — art. Existing direction, NOT re-coloured in Phase 2.5. */
  --celfavia-slate: #40434E;
  --celfavia-foam: #F8F4EF;

  /* Kyne English — parent of the English line */
  --kyne-english-powder-blue: #A9C7EC;
  --kyne-english-urban-smoke: #535350;

  /* Sorumi English — product */
  --sorumi-vanilla: #FFEBAF;
  --sorumi-moonstone: #4C9DB0;

  /* Kyne Life — health family */
  --kyne-life-pistachio: #D3E1C4;
  --kyne-life-pine: #01391A;

  /* Yevli — product. Pre-existing approved product identity, preserved. */
  --yevli-olive: #476D08;
  --yevli-lemon: #FFF8B9;
  --yevli-wash: #EAF0DE;

  /* ---------- L2 derived variants ----------
     Each exists only because the raw colour fails AA in that role.
     Measured ratios are in the scope comments below. */
  --kyne-labs-rich-blue-lift:  #251C8C;  /* CTA hover */
  --kyne-labs-rich-blue-muted: #4A4763;  /* secondary text */
  --kyne-labs-pale-gray-alt:   #E4E4D6;  /* inset surface */
  --kyne-labs-pale-gray-line:  #CFCFC2;  /* border — #DBDBCE was only 1.16 against Pale Gray */

  --kyne-english-smoke-text:   #3B3B38;  /* Urban Smoke is 4.44 on Powder Blue — just under AA */
  --kyne-english-smoke-deep:   #3D3D3B;  /* inverted band */
  --gsat-smoke-focus:          #2F2F2C;  /* GSAT reads more serious than Sorumi */
  --gsat-smoke-accent:         #424240;

  --sorumi-moonstone-text:     #316A78;  /* Moonstone is 3.11 on white, 2.63 on Vanilla */
  --sorumi-moonstone-deep:     #275663;  /* CTA hover */
  --sorumi-ink:                #2B2A24;  /* warm neutral body text */

  --kyne-life-pine-lift:       #0B4D28;  /* CTA hover */
  --kyne-life-ink:             #16261B;  /* body text, green-leaning neutral */

  --celfavia-ink:              #1F2024;  /* near-black, per Celfavia's existing language */

  --white: #FFFFFF;

  /* ---------- L3 Role tokens — default scope = Kyne Labs (parent) ----------
     Kyne Labs must not read as a subsidiary of Celfavia, Kyne English or
     Kyne Life. Pale Gray page + white surfaces + Rich Blue type.

     Rich Blue on Pale Gray  13.27
     Rich Blue on white      15.96
     muted on Pale Gray       7.36
     white on Rich Blue      15.96  */
  --bg:               var(--kyne-labs-pale-gray);
  --surface:          var(--white);
  --surface-alt:      var(--kyne-labs-pale-gray-alt);
  --text:             var(--kyne-labs-rich-blue);
  --text-muted:       var(--kyne-labs-rich-blue-muted);
  --border:           var(--kyne-labs-pale-gray-line);
  --border-accent:    #CBC9DE;
  --accent:           var(--kyne-labs-rich-blue);
  --accent-tint:      var(--kyne-labs-pale-gray);
  --accent-wash:      #F4F4EC;
  --cta-bg:           var(--kyne-labs-rich-blue);
  --cta-text:         var(--white);
  --cta-bg-hover:     var(--kyne-labs-rich-blue-lift);
  --band-bg:          var(--kyne-labs-rich-blue);
  --band-text:        var(--kyne-labs-pale-gray);
  --band-text-muted:  #B8B5D4;
  /* Band secondary-button chrome on dark band surfaces (was rgba in base.css). */
  --band-button-border:       rgba(255, 255, 255, 0.38);
  --band-button-hover-bg:     rgba(255, 255, 255, 0.14);
  --band-button-hover-border: rgba(255, 255, 255, 0.6);
  --hero-from:        #F1F1E6;
  --hero-to:          #E3E3D4;

  /* NOTE: colour and background are applied on `body` in base.css, not here.
     Brand scopes live on `body`, so anything painted from :root would resolve
     the parent tokens before a brand scope could override them. */
  font-family: var(--font-body);
  line-height: var(--leading);
  font-synthesis: none;
}

/* ============================================================
   L4 Scopes
   ============================================================ */

/* ---- Celfavia — art -------------------------------------------------
   NOT re-coloured in Phase 2.5. Warm cream ground, near-black text,
   low-saturation slate accent, museum / editorial language retained.
   near-black on foam  14.86
   slate on foam        9.00
   white on slate       9.86  */
body.brand-celfavia {
  --bg:               var(--celfavia-foam);
  --surface:          var(--white);
  --surface-alt:      #F0EBE2;
  --text:             var(--celfavia-ink);
  --text-muted:       #5C5A55;
  --border:           #E4DED3;
  --border-accent:    #E8E3DA;
  --accent:           var(--celfavia-slate);
  --accent-tint:      #E8E3DA;
  --accent-wash:      #F3EFE7;
  --cta-bg:           var(--celfavia-slate);
  --cta-text:         var(--white);
  --cta-bg-hover:     #32353F;
  --band-bg:          #2B2D35;
  --band-text:        var(--celfavia-foam);
  --band-text-muted:  #C4C1BA;
  --band-button-border:       rgba(255, 255, 255, 0.38);
  --band-button-hover-bg:     rgba(255, 255, 255, 0.14);
  --band-button-hover-border: rgba(255, 255, 255, 0.6);
  --hero-from:        var(--celfavia-foam);
  --hero-to:          #EFE9DF;
}

/* ---- Kyne English — parent of the English line ----------------------
   Educational but not childish. Holds Sorumi, GSAT and a future TOEIC app.
   Powder Blue is 1.74 on white, so it is a surface / border / tint only.
   Urban Smoke is 4.44 on Powder Blue — just under AA — so body text uses
   the slightly deeper --kyne-english-smoke-text.
   smoke-text on white        11.24
   smoke-text on Powder Blue   6.46
   Urban Smoke on bg           7.18
   white on Urban Smoke        7.72  */
body.brand-kyne-english {
  --bg:               #F4F7FB;
  --surface:          var(--white);
  --surface-alt:      #E9F0F9;
  --text:             var(--kyne-english-smoke-text);
  --text-muted:       var(--kyne-english-urban-smoke);
  --border:           #D3E1F3;
  --border-accent:    var(--kyne-english-powder-blue);
  --accent:           var(--kyne-english-urban-smoke);
  --accent-tint:      var(--kyne-english-powder-blue);
  --accent-wash:      #EAF1FA;
  --cta-bg:           var(--kyne-english-urban-smoke);
  --cta-text:         var(--white);
  --cta-bg-hover:     var(--kyne-english-smoke-deep);
  --band-bg:          var(--kyne-english-smoke-deep);
  --band-text:        #EAF1FA;
  --band-text-muted:  #BFC6CC;
  --band-button-border:       rgba(255, 255, 255, 0.38);
  --band-button-hover-bg:     rgba(255, 255, 255, 0.14);
  --band-button-hover-border: rgba(255, 255, 255, 0.6);
  --hero-from:        #EDF3FB;
  --hero-to:          #DCE9F7;
}

/* ---- Kyne Life — health family -------------------------------------
   Family-level palette. Must hold future health apps, so it is NOT the
   Yevli palette. Yevli keeps its own identity (scope further down).
   ink on bg            14.71
   ink on Pistachio     11.56
   muted on bg           6.79
   Pine on white        13.11
   white on Pine        13.11  */
body.brand-kyne-life {
  --bg:               #F4F8EF;
  --surface:          var(--white);
  --surface-alt:      var(--kyne-life-pistachio);
  --text:             var(--kyne-life-ink);
  --text-muted:       #4C5A4D;
  --border:           #D7E2CA;
  --border-accent:    var(--kyne-life-pistachio);
  --accent:           var(--kyne-life-pine);
  --accent-tint:      var(--kyne-life-pistachio);
  --accent-wash:      #EAF2E1;
  --cta-bg:           var(--kyne-life-pine);
  --cta-text:         var(--white);
  --cta-bg-hover:     var(--kyne-life-pine-lift);
  --band-bg:          var(--kyne-life-pine);
  --band-text:        #E7F0DC;
  --band-text-muted:  #A9BFA9;
  --band-button-border:       rgba(255, 255, 255, 0.38);
  --band-button-hover-bg:     rgba(255, 255, 255, 0.14);
  --band-button-hover-border: rgba(255, 255, 255, 0.6);
  --hero-from:        #F1F7EA;
  --hero-to:          #E1EBD4;
}

/* ============================================================
   Product-level scopes.
   Selected by data-route so that no route metadata or page markup has to
   change, and so a product can keep its own identity inside its brand.
   Equal specificity to the brand scopes above, so ORDER MATTERS:
   these must stay below the brand scopes.
   ============================================================ */

/* ---- Sorumi English — product --------------------------------------
   Warm and friendly, not kindergarten. Vanilla carries the warmth as a
   surface; Moonstone is the accent.
   Moonstone fails AA as text (3.11 on white, 2.63 on Vanilla), so small
   accent text and CTA fills use --sorumi-moonstone-text. Raw Moonstone is
   kept for borders, icons, illustration and large type via --accent-tint.
   ink on Vanilla            12.17
   ink on bg                 13.83
   moonstone-text on white    6.06
   moonstone-text on Vanilla  5.13
   white on moonstone-text    6.06  */
body[data-route="/english/sorumi/"] {
  --bg:               #FFFAF0;
  --surface:          var(--white);
  --surface-alt:      var(--sorumi-vanilla);
  --text:             var(--sorumi-ink);
  --text-muted:       #5E5B4E;
  --border:           #EFE2C2;
  --border-accent:    var(--sorumi-moonstone);
  --accent:           var(--sorumi-moonstone-text);
  --accent-tint:      var(--sorumi-moonstone);
  --accent-wash:      #FFF6DE;
  --cta-bg:           var(--sorumi-moonstone-text);
  --cta-text:         var(--white);
  --cta-bg-hover:     var(--sorumi-moonstone-deep);
  /* Deep navy Kyne Labs shell (global header), not a product CTA band. */
  --band-bg:          var(--kyne-labs-rich-blue);
  --band-text:        var(--kyne-labs-pale-gray);
  --band-text-muted:  #B8B5D4;
  --band-button-border:       rgba(255, 255, 255, 0.38);
  --band-button-hover-bg:     rgba(255, 255, 255, 0.14);
  --band-button-hover-border: rgba(255, 255, 255, 0.6);
  --hero-from:        #FFF6DE;
  --hero-to:          var(--sorumi-vanilla);
}

/* ---- GSAT English — product ----------------------------------------
   No second brand palette invented. GSAT stays on the Kyne English
   parent colours and separates from Sorumi by weighting, not by hue:
     Sorumi  warm Vanilla surfaces + Moonstone accent
     GSAT    cool graphite ground + Powder Blue as a hairline only
   Reads more mature, more focused, more exam-oriented.
   Revisit only if GSAT Product Control confirms a dedicated palette. */
body[data-route="/english/gsat/"] {
  --bg:               #F6F7F8;
  --surface:          var(--white);
  --surface-alt:      #E9EBEE;
  --text:             var(--gsat-smoke-focus);
  --text-muted:       var(--kyne-english-urban-smoke);
  --border:           #D8DADC;
  --border-accent:    var(--kyne-english-powder-blue);
  --accent:           var(--gsat-smoke-accent);
  --accent-tint:      var(--kyne-english-powder-blue);
  --accent-wash:      #EDF1F6;
  --cta-bg:           var(--gsat-smoke-focus);
  --cta-text:         var(--white);
  --cta-bg-hover:     var(--gsat-smoke-accent);
  --band-bg:          var(--gsat-smoke-focus);
  --band-text:        #EDF1F6;
  --band-text-muted:  #BCC0C4;
  --band-button-border:       rgba(255, 255, 255, 0.38);
  --band-button-hover-bg:     rgba(255, 255, 255, 0.14);
  --band-button-hover-border: rgba(255, 255, 255, 0.6);
  --hero-from:        #F2F4F6;
  --hero-to:          #E7EAEE;
}

/* ---- Yevli — product ------------------------------------------------
   Pre-existing, approved product identity. Phase 2.5 does NOT overwrite it
   with the Kyne Life family palette. Every value here reproduces exactly
   what these routes rendered before Phase 2.5, so /life/yevli/ and the
   /yevli/* compatibility and frozen legal routes are visually unchanged.
   Must stay AFTER body.brand-kyne-life — equal specificity, later wins. */
body[data-route="/life/yevli/"],
body[data-route^="/yevli/"] {
  --bg:               #FBFBF9;
  --surface:          var(--white);
  --surface-alt:      #F3F3EF;
  --text:             #1C1E1F;
  --text-muted:       #5A5D5C;
  --border:           #E2E2DD;
  --border-accent:    var(--yevli-lemon);
  --accent:           var(--yevli-olive);
  --accent-tint:      var(--yevli-lemon);
  --accent-wash:      var(--yevli-wash);
  --cta-bg:           #1C1E1F;
  --cta-text:         var(--white);
  --cta-bg-hover:     var(--yevli-olive);
  --band-bg:          #1C1E1F;
  --band-text:        #F5F5F2;
  --band-text-muted:  #C8CBC7;
  --band-button-border:       rgba(255, 255, 255, 0.38);
  --band-button-hover-bg:     rgba(255, 255, 255, 0.14);
  --band-button-hover-border: rgba(255, 255, 255, 0.6);
  --hero-from:        #F3F6EB;
  --hero-to:          var(--yevli-wash);
}

/* ============================================================
   Per-card brand cues.
   Used on the parent homepage so a portal or featured card is
   recognisable as its brand without turning the page into a collage.
   These remap accent tokens only — never --bg, --surface or --text — so
   the page keeps one Kyne Labs ground and one type colour.
   ============================================================ */
.on-celfavia     { --accent: var(--celfavia-slate);           --accent-tint: #E8E3DA;                            --accent-wash: #F4F0E9; --border-accent: #DCD5C9; }
.on-kyne-english { --accent: var(--kyne-english-urban-smoke); --accent-tint: var(--kyne-english-powder-blue);    --accent-wash: #EAF1FA; --border-accent: var(--kyne-english-powder-blue); }
.on-kyne-life    { --accent: var(--kyne-life-pine);           --accent-tint: var(--kyne-life-pistachio);         --accent-wash: #EAF2E1; --border-accent: var(--kyne-life-pistachio); }
.on-sorumi       { --accent: var(--sorumi-moonstone-text);    --accent-tint: var(--sorumi-moonstone);            --accent-wash: #FFF6DE; --border-accent: var(--sorumi-moonstone); }
.on-gsat         { --accent: var(--gsat-smoke-accent);        --accent-tint: var(--kyne-english-powder-blue);    --accent-wash: #EDF1F6; --border-accent: var(--kyne-english-powder-blue); }
.on-yevli        { --accent: var(--yevli-olive);              --accent-tint: var(--yevli-lemon);                 --accent-wash: var(--yevli-wash); --border-accent: var(--yevli-lemon); }