/*
 * Cica Tanoda – közös arculati tokenek (v1, 2026-10-08)
 *
 * Minden Cica Tanoda-felület (honlap, Szólásműhely, Feladatgyár, órafoglaló)
 * ezt a fájlt húzza be. Csak CSS-változókat definiál; elemstílust nem ír.
 *   <link rel="stylesheet" href="/brand/cica-tokens.css">
 *
 * Előtag: --ct-  (nem ütközik az alkalmazások saját változóival).
 * Téma: alapból a rendszer beállítását követi. Kézi választás:
 *   <html data-theme="light">  vagy  <html data-theme="dark">
 * Betűtípus: csak helyi rendszerbetűk, távoli betöltés nincs.
 * Kontraszt: a szöveges tokenek minden felületi tokenen ≥ 4,5:1, a vezérlőszélek
 * és a fókusz ≥ 3:1 (mérve, lásd ARCULAT.md). A --ct-gold és a --ct-tan
 * díszítőszín: szöveg színeként nem használható.
 */

:root {
  color-scheme: light;

  /* ---------- Alappaletta (primitívek; közvetlenül ritkán kell) ---------- */
  --ct-navy-950: #0b1e3f;
  --ct-navy-900: #0f2a56;   /* sapka */
  --ct-navy-800: #13284b;   /* fő szöveg, logó */
  --ct-navy-700: #173a6b;   /* elsődleges gomb */
  --ct-navy-600: #1f4c8a;   /* hivatkozás */
  --ct-navy-500: #215cb0;   /* fókusz */
  --ct-navy-200: #c9d6ec;
  --ct-navy-100: #e3eaf5;
  --ct-navy-50:  #eef2f9;

  --ct-gold-500: #f4b23a;   /* bojt – díszítés, kitöltés; szövegnek nem */
  --ct-gold-700: #8a5a0b;   /* arany árnyalatú szöveg világos háttéren */
  --ct-gold-100: #fdf1d6;
  --ct-tan-400:  #c8a27a;   /* szóvédjegy íve, finom díszvonal */

  --ct-fur-cream: #f6ecdf;
  --ct-fur-brown: #8e6e5b;
  --ct-eye-blue:  #2b8fe6;
  --ct-paw-pink:  #ee98a3;

  --ct-paper:  #fbf8f2;
  --ct-white:  #ffffff;

  /* ---------- Szemantikus színek: világos téma ---------- */
  --ct-color-bg: #fbf8f2;              /* oldal háttere (papír) */
  --ct-color-surface: #ffffff;         /* kártya, munkafelület */
  --ct-color-surface-sunken: #f4efe6;  /* süllyesztett sáv, táblázatfej */
  --ct-color-surface-soft: #eef2f9;    /* semleges kiemelt blokk */
  --ct-color-bubble: #f7efe2;          /* Misu szövegbuboréka */
  --ct-color-overlay: rgb(11 30 63 / 0.45);

  --ct-color-text: #13284b;
  --ct-color-text-muted: #526176;
  --ct-color-text-subtle: #5f6b7e;     /* segédszöveg, helyőrző */
  --ct-color-text-inverse: #ffffff;
  --ct-color-link: #1f4c8a;
  --ct-color-link-hover: #13284b;

  --ct-color-primary: #173a6b;
  --ct-color-primary-hover: #0f2a56;
  --ct-color-primary-active: #0b1e3f;
  --ct-color-on-primary: #ffffff;
  --ct-color-primary-soft: #e3eaf5;    /* kiválasztott sor, aktív fül háttere */

  --ct-color-accent: #f4b23a;          /* arany kitöltés (jelvény, kiemelő csík) */
  --ct-color-on-accent: #13284b;
  --ct-color-accent-text: #8a5a0b;     /* arany szöveg */
  --ct-color-accent-soft: #fdf1d6;
  --ct-color-ornament: #c8a27a;        /* díszvonal, elválasztó ív */

  --ct-color-line: #d8dee8;            /* díszítő elválasztó */
  --ct-color-line-strong: #7e8ba0;     /* beviteli mező, vezérlő széle (≥ 3:1) */
  --ct-color-focus: #215cb0;

  --ct-color-success: #246340;
  --ct-color-success-soft: #e4f2e9;
  --ct-color-error: #a13535;
  --ct-color-error-soft: #f9e5e3;
  --ct-color-warning: #8a5a0b;         /* pl. „fogy az idő” – nem riasztó vörös */
  --ct-color-warning-soft: #fdf1d6;
  --ct-color-info: #1f4c8a;
  --ct-color-info-soft: #eef2f9;

  /* Alkalmazásszínek: csempe, ikonhátter, apró kiemelés. Az elsődleges gomb mindenhol navy. */
  --ct-app-honlap: #173a6b;
  --ct-app-szolasmuhely: #0f6e73;      /* a Szólásműhely eddigi türkize, örökség */
  --ct-app-feladatgyar: #b54a30;       /* korall */
  --ct-app-orafoglalo: #5551d8;        /* a LessonHub meglévő indigója, örökség */
  --ct-app-honlap-soft: #e3eaf5;
  --ct-app-szolasmuhely-soft: #e2f2f1;
  --ct-app-feladatgyar-soft: #fbe9e3;
  --ct-app-orafoglalo-soft: #ecebfb;

  /* ---------- Tipográfia ---------- */
  --ct-font-body: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Noto Sans",
    "Helvetica Neue", Arial, sans-serif;
  --ct-font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
    "Noto Serif", "Droid Serif", serif;
  --ct-font-mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;

  --ct-text-xs: 0.8125rem;   /* 13 px – a legkisebb megengedett */
  --ct-text-sm: 0.875rem;    /* 14 */
  --ct-text-md: 1rem;        /* 16 – törzsszöveg */
  --ct-text-lg: 1.125rem;    /* 18 */
  --ct-text-xl: 1.25rem;     /* 20 */
  --ct-text-2xl: 1.5rem;     /* 24 */
  --ct-text-3xl: clamp(1.625rem, 1.3rem + 1.2vw, 2rem);      /* 26–32 */
  --ct-text-4xl: clamp(2rem, 1.5rem + 2vw, 2.75rem);         /* 32–44 */
  --ct-text-5xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.375rem);   /* 36–54, honlap fejléce */

  --ct-leading-tight: 1.2;
  --ct-leading-snug: 1.35;
  --ct-leading-body: 1.6;
  --ct-weight-regular: 400;
  --ct-weight-semibold: 600;
  --ct-weight-bold: 700;
  --ct-measure: 70ch;        /* hosszú szöveg sorhossza */

  /* ---------- Térköz (4 px-es rács) ---------- */
  --ct-space-1: 4px;
  --ct-space-2: 8px;
  --ct-space-3: 12px;
  --ct-space-4: 16px;
  --ct-space-5: 24px;
  --ct-space-6: 32px;
  --ct-space-7: 48px;
  --ct-space-8: 64px;
  --ct-gutter: 16px;         /* mobil oldalmargó */

  /* ---------- Méretek ---------- */
  --ct-touch-min: 44px;      /* legkisebb érintési cél */
  --ct-control-h: 48px;      /* gomb, mező alapmagassága */
  --ct-container: 1180px;    /* honlap és tartalmi oldalak */
  --ct-container-wide: 1320px; /* munkafelületek (Szólásműhely, Feladatgyár tanári) */
  --ct-container-text: 760px;

  --ct-misu-xs: 40px;        /* sorközi reakció, lista */
  --ct-misu-sm: 72px;        /* visszajelzés-sáv */
  --ct-misu-md: 120px;       /* kártya, üres állapot */
  --ct-misu-lg: 200px;       /* eredményképernyő */
  --ct-misu-xl: 300px;       /* honlap fejléce */

  /* ---------- Lekerekítés ---------- */
  --ct-radius-xs: 6px;       /* címke, jelvény */
  --ct-radius-sm: 10px;      /* gomb, mező */
  --ct-radius-md: 14px;      /* kis kártya, menü */
  --ct-radius-lg: 18px;      /* kártya */
  --ct-radius-xl: 24px;      /* nagy felület, párbeszédablak */
  --ct-radius-pill: 999px;

  /* ---------- Szegély és fókusz ---------- */
  --ct-border-width: 1px;
  --ct-focus-width: 3px;
  --ct-focus-offset: 3px;
  --ct-focus-ring: 0 0 0 var(--ct-focus-width) var(--ct-color-focus);

  /* ---------- Árnyék (navy árnyalatú, csak funkcióhoz) ---------- */
  --ct-shadow-xs: 0 1px 2px rgb(19 40 75 / 0.06);
  --ct-shadow-sm: 0 1px 3px rgb(19 40 75 / 0.08), 0 1px 2px rgb(19 40 75 / 0.05);
  --ct-shadow-md: 0 6px 16px rgb(19 40 75 / 0.10), 0 2px 4px rgb(19 40 75 / 0.05);
  --ct-shadow-lg: 0 18px 44px rgb(19 40 75 / 0.18), 0 4px 10px rgb(19 40 75 / 0.06);
  --ct-shadow-inset: inset 0 1px 2px rgb(19 40 75 / 0.08);

  /* ---------- Mozgás ---------- */
  --ct-duration-fast: 120ms;
  --ct-duration-base: 160ms;
  --ct-duration-slow: 240ms;
  --ct-duration-misu: 420ms;  /* kabala belépése */
  --ct-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ct-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ct-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ---------- Rétegek ---------- */
  --ct-z-sticky: 20;
  --ct-z-nav: 30;
  --ct-z-overlay: 40;
  --ct-z-modal: 50;
  --ct-z-toast: 60;
}

/* ---------- Sötét téma: rendszerbeállítás szerint ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ct-color-bg: #0e1a2e;
    --ct-color-surface: #15243d;
    --ct-color-surface-sunken: #1b2e4c;
    --ct-color-surface-soft: #1d3050;
    --ct-color-bubble: #22324d;
    --ct-color-overlay: rgb(3 8 18 / 0.62);
    --ct-color-text: #f3eee4;
    --ct-color-text-muted: #b4bfcf;
    --ct-color-text-subtle: #9aa6ba;
    --ct-color-text-inverse: #0e1a2e;
    --ct-color-link: #9cc0ff;
    --ct-color-link-hover: #c2d6f8;
    --ct-color-primary: #a8c5f5;
    --ct-color-primary-hover: #c2d6f8;
    --ct-color-primary-active: #d6e3fa;
    --ct-color-on-primary: #0e1a2e;
    --ct-color-primary-soft: #23395e;
    --ct-color-accent: #f4b23a;
    --ct-color-on-accent: #13284b;
    --ct-color-accent-text: #f6c565;
    --ct-color-accent-soft: #3d2e12;
    --ct-color-ornament: #c8a27a;
    --ct-color-line: #2a3b58;
    --ct-color-line-strong: #6a7b98;
    --ct-color-focus: #8fb8ff;
    --ct-color-success: #7fd1a0;
    --ct-color-success-soft: #15382a;
    --ct-color-error: #ff9c94;
    --ct-color-error-soft: #42201f;
    --ct-color-warning: #f4c26b;
    --ct-color-warning-soft: #3d2e12;
    --ct-color-info: #9cc0ff;
    --ct-color-info-soft: #1d3050;
    --ct-app-honlap: #a8c5f5;
    --ct-app-szolasmuhely: #5cc9c4;
    --ct-app-feladatgyar: #ff9f82;
    --ct-app-orafoglalo: #afadff;
    --ct-app-honlap-soft: #1d3050;
    --ct-app-szolasmuhely-soft: #123a3c;
    --ct-app-feladatgyar-soft: #3e2219;
    --ct-app-orafoglalo-soft: #24264d;
    --ct-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
    --ct-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.35), 0 1px 2px rgb(0 0 0 / 0.25);
    --ct-shadow-md: 0 6px 16px rgb(0 0 0 / 0.4), 0 2px 4px rgb(0 0 0 / 0.25);
    --ct-shadow-lg: 0 18px 44px rgb(0 0 0 / 0.5), 0 4px 10px rgb(0 0 0 / 0.3);
    --ct-shadow-inset: inset 0 1px 2px rgb(0 0 0 / 0.35);
  }
}

/* ---------- Sötét téma: kézi választás ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ct-color-bg: #0e1a2e;
  --ct-color-surface: #15243d;
  --ct-color-surface-sunken: #1b2e4c;
  --ct-color-surface-soft: #1d3050;
  --ct-color-bubble: #22324d;
  --ct-color-overlay: rgb(3 8 18 / 0.62);
  --ct-color-text: #f3eee4;
  --ct-color-text-muted: #b4bfcf;
  --ct-color-text-subtle: #9aa6ba;
  --ct-color-text-inverse: #0e1a2e;
  --ct-color-link: #9cc0ff;
  --ct-color-link-hover: #c2d6f8;
  --ct-color-primary: #a8c5f5;
  --ct-color-primary-hover: #c2d6f8;
  --ct-color-primary-active: #d6e3fa;
  --ct-color-on-primary: #0e1a2e;
  --ct-color-primary-soft: #23395e;
  --ct-color-accent: #f4b23a;
  --ct-color-on-accent: #13284b;
  --ct-color-accent-text: #f6c565;
  --ct-color-accent-soft: #3d2e12;
  --ct-color-ornament: #c8a27a;
  --ct-color-line: #2a3b58;
  --ct-color-line-strong: #6a7b98;
  --ct-color-focus: #8fb8ff;
  --ct-color-success: #7fd1a0;
  --ct-color-success-soft: #15382a;
  --ct-color-error: #ff9c94;
  --ct-color-error-soft: #42201f;
  --ct-color-warning: #f4c26b;
  --ct-color-warning-soft: #3d2e12;
  --ct-color-info: #9cc0ff;
  --ct-color-info-soft: #1d3050;
  --ct-app-honlap: #a8c5f5;
  --ct-app-szolasmuhely: #5cc9c4;
  --ct-app-feladatgyar: #ff9f82;
  --ct-app-orafoglalo: #afadff;
  --ct-app-honlap-soft: #1d3050;
  --ct-app-szolasmuhely-soft: #123a3c;
  --ct-app-feladatgyar-soft: #3e2219;
  --ct-app-orafoglalo-soft: #24264d;
  --ct-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
  --ct-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.35), 0 1px 2px rgb(0 0 0 / 0.25);
  --ct-shadow-md: 0 6px 16px rgb(0 0 0 / 0.4), 0 2px 4px rgb(0 0 0 / 0.25);
  --ct-shadow-lg: 0 18px 44px rgb(0 0 0 / 0.5), 0 4px 10px rgb(0 0 0 / 0.3);
  --ct-shadow-inset: inset 0 1px 2px rgb(0 0 0 / 0.35);
}

/* ---------- Csökkentett mozgás ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ct-duration-fast: 0ms;
    --ct-duration-base: 0ms;
    --ct-duration-slow: 0ms;
    --ct-duration-misu: 0ms;
  }
}