/* =============================================================
   KAYAN — DESIGN TOKENS
   ----------------------------------------------------------------
   Token hierarchy:
     1. :root              -> Kayan platform brand (marketing pages)
     2. [data-theme="..."] -> 3 institution themes (kg / school / uni)
     3. [data-mode="dark"] -> dark mode overrides (works with any theme)
   All component CSS reads from --color-*, --radius-*, --font-*,
   --space-*, --shadow-*. Never hardcode colors in components.
   ============================================================= */

:root {
  /* ---- Kayan brand (platform marketing) ---- */
  --brand-ink:        #0E1424;
  --brand-paper:      #F7F6F2;
  --brand-paper-2:    #EFEDE6;
  --brand-line:       #E2DFD6;
  --brand-mute:       #6B6E78;
  --brand-primary:    #2A2F6B;    /* deep indigo */
  --brand-primary-2:  #3A41A0;
  --brand-accent:     #E26A4C;    /* warm coral */
  --brand-accent-2:   #F4B860;    /* honey */
  --brand-leaf:       #2F6A4A;

  /* ---- Default (= School) institution tokens, can be overridden ---- */
  --color-bg:         #F4F6FB;
  --color-surface:    #FFFFFF;
  --color-surface-2:  #F8FAFE;
  --color-line:       #E2E7F1;
  --color-line-2:     #CFD6E5;
  --color-ink:        #0F1A2E;
  --color-ink-2:      #3B4660;
  --color-mute:       #6E7689;
  --color-primary:    #1E55E0;
  --color-primary-ink:#FFFFFF;
  --color-primary-soft:#E4ECFE;
  --color-accent:     #16A47B;
  --color-warn:       #E08B1E;
  --color-danger:     #D8463A;
  --color-focus:      #1E55E0;

  /* ---- Type ---- */
  --font-display: "Plus Jakarta Sans", "Cairo", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", "Cairo", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --fs-1: 13px;
  --fs-2: 14px;
  --fs-3: 15px;
  --fs-4: 17px;
  --fs-5: 20px;
  --fs-6: 24px;
  --fs-7: 32px;
  --fs-8: 44px;
  --fs-9: 60px;
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.55;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --weight-body: 450;
  --weight-strong: 600;
  --weight-display: 700;

  /* ---- Shape ---- */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-5: 28px;
  --r-pill: 999px;
  --border-w: 1px;

  /* ---- Space ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 44px;
  --s-9: 64px;
  --s-10:96px;

  /* ---- Shadow ---- */
  --sh-1: 0 1px 2px rgba(15, 26, 46, 0.05);
  --sh-2: 0 4px 14px -4px rgba(15, 26, 46, 0.10);
  --sh-3: 0 16px 40px -12px rgba(15, 26, 46, 0.18);
  --sh-pop:0 24px 60px -16px rgba(15, 26, 46, 0.25);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
}

/* ============================================================
   THEME: KINDERGARTEN — playful, vibrant, rounded
   ============================================================ */
[data-theme="kindergarten"] {
  --color-bg:        #FFF8EE;
  --color-surface:   #FFFFFF;
  --color-surface-2: #FFF2DC;
  --color-line:      #F3D9B6;
  --color-line-2:    #ECC58A;
  --color-ink:       #2D1E47;
  --color-ink-2:     #5B4A7A;
  --color-mute:      #8A7AA8;
  --color-primary:   #E6398A;     /* bubblegum magenta */
  --color-primary-ink:#FFFFFF;
  --color-primary-soft:#FFE0EE;
  --color-accent:    #FFC233;     /* sunny */
  --color-warn:      #FF8A3D;
  --color-danger:    #FF5C5C;
  --color-focus:     #E6398A;

  --font-display: "Fredoka", "Cairo", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", "Cairo", system-ui, sans-serif;
  --weight-body: 500;
  --weight-strong: 600;
  --weight-display: 700;

  --r-1: 12px;
  --r-2: 18px;
  --r-3: 24px;
  --r-4: 32px;
  --r-5: 40px;

  --sh-2: 0 6px 18px -6px rgba(230, 57, 138, 0.25);
  --sh-3: 0 20px 50px -16px rgba(230, 57, 138, 0.3);

  /* extra palette for KG illustrations */
  --kg-sky:   #65C8E6;
  --kg-mint:  #5DD2A8;
  --kg-grape: #9B6BD8;
  --kg-coral: #FF8A6B;
}

/* ============================================================
   THEME: SCHOOL — balanced, modern, clean (this is the default)
   ============================================================ */
[data-theme="school"] {
  --color-bg:        #F4F6FB;
  --color-surface:   #FFFFFF;
  --color-surface-2: #F8FAFE;
  --color-line:      #E2E7F1;
  --color-line-2:    #CFD6E5;
  --color-ink:       #0F1A2E;
  --color-ink-2:     #3B4660;
  --color-mute:      #6E7689;
  --color-primary:   #1E55E0;
  --color-primary-ink:#FFFFFF;
  --color-primary-soft:#E4ECFE;
  --color-accent:    #16A47B;
  --color-warn:      #E08B1E;
  --color-danger:    #D8463A;
  --color-focus:     #1E55E0;

  --font-display: "Plus Jakarta Sans", "Cairo", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", "Cairo", system-ui, sans-serif;

  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 18px;
  --r-5: 24px;
}

/* ============================================================
   THEME: UNIVERSITY — formal, elegant, refined
   ============================================================ */
[data-theme="university"] {
  --color-bg:        #F6F4EE;        /* warm parchment */
  --color-surface:   #FFFDF8;
  --color-surface-2: #F0ECDF;
  --color-line:      #DBD3BE;
  --color-line-2:    #B9AE91;
  --color-ink:       #1A1F2C;        /* oxford near-black */
  --color-ink-2:     #2E3346;
  --color-mute:      #6B6655;
  --color-primary:   #1F2A55;        /* oxford navy */
  --color-primary-ink:#FFFDF8;
  --color-primary-soft:#E3E5EE;
  --color-accent:    #A38040;        /* burnished gold */
  --color-warn:      #B4762E;
  --color-danger:    #983028;
  --color-focus:     #A38040;

  --font-display: "Source Serif 4", "Amiri", Georgia, serif;
  --font-body:    "Inter", "Cairo", system-ui, sans-serif;
  --weight-body: 420;
  --weight-strong: 600;
  --weight-display: 600;

  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 10px;
  --r-5: 14px;

  --sh-2: 0 2px 8px -2px rgba(31, 42, 85, 0.10);
}

/* ============================================================
   DARK MODE — applies on top of any theme
   ============================================================ */
[data-mode="dark"] {
  --color-bg:        #0B0F1A;
  --color-surface:   #131826;
  --color-surface-2: #1A2032;
  --color-line:      #232A3E;
  --color-line-2:    #2E364E;
  --color-ink:       #ECEFF7;
  --color-ink-2:     #B9BFD0;
  --color-mute:      #7A819A;
  --color-primary-soft: #1B2549;
  --sh-1: 0 1px 2px rgba(0,0,0,0.4);
  --sh-2: 0 4px 14px -4px rgba(0,0,0,0.5);
  --sh-3: 0 16px 40px -12px rgba(0,0,0,0.6);
}
[data-mode="dark"][data-theme="kindergarten"] {
  --color-bg:        #1A1230;
  --color-surface:   #251A41;
  --color-surface-2: #2E2050;
  --color-line:      #3A2C5E;
  --color-line-2:    #4B3A78;
  --color-ink:       #FDEEFF;
  --color-ink-2:     #D8C5F2;
  --color-mute:      #9285B8;
  --color-primary-soft: #4A1D3A;
}
[data-mode="dark"][data-theme="university"] {
  --color-bg:        #14140F;
  --color-surface:   #1C1B16;
  --color-surface-2: #25241D;
  --color-line:      #34322A;
  --color-line-2:    #4A4738;
  --color-ink:       #F0EBDC;
  --color-ink-2:     #C9C1AB;
  --color-mute:      #847D6A;
  --color-primary:   #C8A766;
  --color-primary-ink:#14140F;
  --color-primary-soft:#2B2516;
}

/* ============================================================
   RTL: applies when <html dir="rtl">. We use logical properties
   widely so most things mirror automatically; this fixes
   anything that doesn't.
   ============================================================ */
[dir="rtl"] {
  --font-display: "Cairo", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Cairo", "Plus Jakarta Sans", system-ui, sans-serif;
}
[dir="rtl"][data-theme="kindergarten"] {
  --font-display: "Cairo", "Fredoka", system-ui, sans-serif;
}
[dir="rtl"][data-theme="university"] {
  --font-display: "Amiri", "Source Serif 4", Georgia, serif;
  --font-body:    "Cairo", "Inter", system-ui, sans-serif;
}