/* absec.hu — dizájn-tokenek, a far360 arculatából (far360/DESIGN.md).
   Világos az alap; a sötét téma a [data-theme="dark"] kapcsolóval jön.
   Szabály: a négy formaszín (coral, mustard, mint, sky) fölött MINDIG sötét szöveg áll,
   fehér szöveg csak --f-primary, --f-danger és --f-dark alapon. */

:root {
  color-scheme: light;

  /* Felületek */
  --f-ground: #f3f0e8;
  --f-hero: #f4f5f3;
  --f-card: #ffffff;
  --f-field: #f3f0e8;
  --f-light: #f4f2ec;
  --f-dark: #101010;

  /* Szöveg */
  --f-ink: #101010;
  --f-ink-soft: #2b2b2b;
  --f-grey: #5a6472;
  --f-grey-2: #55616f;
  --f-on-dark: #dad7cf;
  --f-on-dark-strong: #ffffff;
  --f-on-primary: #ffffff;
  --f-white: #ffffff;

  /* Akcentusok */
  --f-primary: #3a2bd6;
  --f-primary-hover: #2a1fa8;
  --f-primary-ink: #3a2bd6;
  --f-primary-ink-hover: #2a1fa8;
  --f-danger: #8a2418;
  --f-success: #1d6b47;
  --f-coral: #f26b5b;
  --f-mustard: #f2c14e;
  --f-mint: #7cc6a4;
  --f-sky: #a9c9f5;

  /* Vonalak */
  --f-line: rgba(16, 16, 16, 0.16);
  --f-line-strong: rgba(16, 16, 16, 0.85);
  --f-line-on-dark: rgba(218, 215, 207, 0.28);

  /* Liquid Glass */
  --glass-primary: rgba(58, 43, 214, 0.86);
  --glass-primary-hover: rgba(42, 31, 168, 0.92);
  --glass-secondary: rgba(255, 255, 255, 0.72);
  --glass-secondary-hover: rgba(255, 255, 255, 0.88);
  --glass-ghost: rgba(16, 16, 16, 0.06);
  --glass-ghost-hover: rgba(16, 16, 16, 0.1);
  --glass-line: rgba(16, 16, 16, 0.55);
  --glass-line-soft: rgba(16, 16, 16, 0.16);
  --glass-edge: rgba(255, 255, 255, 0.55);
  --glass-edge-low: rgba(16, 16, 16, 0.07);
  --glass-blur: 18px;
  --glass-blur-sm: 10px;
  --glass-saturate: 180%;
  --glass-depth-1: 0 1px 2px rgba(16, 16, 16, 0.06), 0 4px 12px rgba(16, 16, 16, 0.08);
  --glass-depth-2: 0 2px 6px rgba(16, 16, 16, 0.09), 0 10px 26px rgba(16, 16, 16, 0.14);

  /* Lekerekítés */
  --r-tile: 26px;
  --r-card: 22px;
  --r-section: 40px;
  --r-field: 14px;
  --r-pill: 999px;
  --r-chip: 5px;

  /* Ritmus */
  --gutter: clamp(16px, 4vw, 60px);
  --page: 1320px;
  --block: clamp(56px, 8vw, 104px);
  --gap: clamp(16px, 1.6vw, 24px);

  /* Tipográfia */
  --font-sans: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-h1: clamp(2.375rem, 6vw, 5.25rem);
  --t-h2: clamp(1.875rem, 4.4vw, 3.75rem);
  --t-h3: clamp(1.25rem, 2vw, 1.75rem);
  --t-lead: clamp(1.0625rem, 1.5vw, 1.3125rem);
  --t-body: 1rem;
  --t-mono: 0.75rem;

  /* Mozgás */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 180ms;

  /* Régi absec-változónevek — a HTML-be ágyazott var() hivatkozások miatt maradnak. */
  --text: var(--f-ink);
  --text2: var(--f-ink-soft);
  --muted: var(--f-grey);
  --bg: var(--f-ground);
  --gold: var(--f-primary-ink);
  --gold-light: var(--f-primary-ink);
  --green: var(--f-success);
  --blue: var(--f-primary-ink);
  --teal: var(--f-primary-ink);
  --border: var(--f-line);
}

[data-theme="dark"] {
  color-scheme: dark;

  --f-ground: #12110e;
  --f-hero: #14151a;
  --f-card: #1c1b17;
  --f-field: #100f0c;
  --f-light: #23221d;
  --f-dark: #0a0a08;

  --f-ink: #f3f0e8;
  --f-ink-soft: #c9c5ba;
  --f-grey: #a9a59a;
  --f-grey-2: #a9a59a;
  --f-on-dark: #cfccc3;

  /* Felületként fehér felirattal 4,72:1; szövegként külön, világosabb árnyalat kell. */
  --f-primary: #6e5cf0;
  --f-primary-hover: #6250e9;
  --f-primary-ink: #9385f7;
  --f-primary-ink-hover: #b3a8fa;
  --f-danger: #e0776a;
  --f-success: #6fcf9f;
  --f-coral: #d55b4c;
  --f-mustard: #d9a93c;
  --f-mint: #5fa888;
  --f-sky: #8fb2e0;

  --f-line: rgba(243, 240, 232, 0.2);
  --f-line-strong: rgba(243, 240, 232, 0.78);

  --glass-primary: rgba(110, 92, 240, 0.9);
  --glass-primary-hover: rgba(98, 80, 233, 0.95);
  --glass-secondary: rgba(28, 27, 23, 0.72);
  --glass-secondary-hover: rgba(40, 39, 34, 0.88);
  --glass-ghost: rgba(243, 240, 232, 0.08);
  --glass-ghost-hover: rgba(243, 240, 232, 0.14);
  --glass-line: rgba(243, 240, 232, 0.55);
  --glass-line-soft: rgba(243, 240, 232, 0.18);
  --glass-edge: rgba(255, 255, 255, 0.12);
  --glass-edge-low: rgba(0, 0, 0, 0.3);
  --glass-depth-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.35);
  --glass-depth-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 10px 26px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-primary: #3a2bd6;
    --glass-primary-hover: #2a1fa8;
    --glass-secondary: #fbfaf7;
    --glass-secondary-hover: #ffffff;
    --glass-ghost: #efece3;
    --glass-ghost-hover: #e7e4da;
    --glass-edge: transparent;
  }
}

/* =============================================================================
   KIEGÉSZÍTÉS — az iktató saját és a far360-ból átvett tokenjei.
   Az absec.hu tokens.css (fent) a kanonikus; az alábbiak ott hiányoznak, a far360
   alkalmazás-CSS-e viszont használja őket. Ha az absec.hu felveszi őket, innen törölni kell.
   ============================================================================= */
:root {
  /* far360-ból: halvány elsődleges kitöltés, mező-fókuszgyűrű, szürke, áttetsző fehér. */
  --f-primary-soft: rgba(58, 43, 214, 0.08);
  --f-primary-ring: rgba(58, 43, 214, 0.65);   /* .60 alatt a gyűrű kontrasztja 3:1 alá esik */
  --f-grey-light: #646c7a;                     /* ground 4,65:1 · fehér 5,29:1 */
  --f-white-60: rgba(255, 255, 255, 0.6);

  /* far360-ból: romboló gomb üvege (a far360-ban --glass-danger). */
  --glass-danger: rgba(138, 36, 24, 0.9);
  --glass-danger-hover: rgba(138, 36, 24, 0.96);

  /* far360-ból: állapotjelvények (a badges.css az iktatási állapotokra képezi le). */
  --f-badge-generalva-bg: rgba(107, 114, 128, 0.14);
  --f-badge-generalva-fg: #3f4653;
  --f-badge-var-bg: rgba(242, 193, 78, 0.3);
  --f-badge-var-fg: #6b4e06;
  --f-badge-alairva-bg: rgba(124, 198, 164, 0.32);
  --f-badge-alairva-fg: #1c5b42;
  --f-badge-far-bg: rgba(169, 201, 245, 0.38);
  --f-badge-far-fg: #1b3f73;
  --f-badge-lejart-bg: rgba(242, 107, 91, 0.26);
  --f-badge-lejart-fg: #8a2418;

  /* iktató-saját: a sötét üvegfelület (fejléc, lenyíló) és a formaszínek fölötti szöveg. */
  --glass-dark: rgba(16, 16, 16, 0.9);
  --f-on-shape: #101010;
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-danger: #8a2418;
    --glass-danger-hover: #7a1f14;
    --glass-dark: #101010;
  }
}