/* ==========================================================================
   Design Tokens — from UdstillerGuide v3 (Go project)
   ========================================================================== */

/* Figtree — self-hosted */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand teal scale */
  --brand-05: #050a0d;
  --brand-10: #0a1114;
  --brand-20: #141f24;
  --brand-30: #1e2f36;
  --brand-40: #2a4049;
  --brand-50: #314F59;
  --brand-60: #3a6878;
  --brand-70: #528898;
  --brand-80: #7fa8b6;
  --brand-90: #b0c8d1;
  --brand-95: #dce8ec;

  /* Semantic */
  --brand-primary: #314F59;
  --brand-primary-hover: #428B98;
  --brand-primary-active: #2D444C;
  --brand-highlight: #7FBEC6;
  /* Accent — WCAG AA-compliant against #FFFFFF surface.
     Original brand orange #E07A5F had 2.95:1 contrast against white,
     failing AA for both large and normal text. New value (#B85A3A)
     reaches 4.59:1 so white text on accent buttons and orange links
     on white surface both meet WCAG AA. Same value used in dark mode
     since dark surfaces give plenty of contrast either way. */
  --brand-accent: #B85A3A;
  --brand-accent-hover: #9A4830;
  --brand-accent-rgb: 184, 90, 58;

  /* Aliases — page-CSS bruger kortere navne (--accent, --primary, --line,
     --ink etc.). Mappet til de kanoniske brand/surface-tokens så cd-app.css
     og stand.css/cd-stand-* fortsætter med at virke uden konkurrerende :root.
     Auto-flipper i dark mode via underliggende tokens. */
  --primary: var(--brand-primary);
  --primary-hover: var(--brand-primary-hover);
  --accent: var(--brand-accent);
  --accent-hover: var(--brand-accent-hover);
  --highlight: var(--brand-highlight);
  --ink: var(--text);
  --muted: var(--text-muted);
  --line: var(--border);
  --cream: var(--surface);
  --sand: var(--surface-hover);
  --accent-soft: rgba(var(--brand-accent-rgb), 0.12);

  /* Status */
  --brand-success: #00883C;
  --brand-warning: #D4A017;
  --brand-danger: #DC2626;
  --brand-info: #2563EB;
  --success: var(--brand-success);
  --warning: var(--brand-warning);
  --danger: var(--brand-danger);

  /* Surfaces */
  --bg: #f8f9fa;
  --surface: #ffffff;
  --surface-hover: #f1f5f9;
  --border: #e2e8f0;
  --text: #1d2327;
  --text-muted: #64748b;

  /* Series */
  --serie-b: #E2EFDA;
  --serie-c: #FCE4CC;
  --serie-d: #F2F2F2;
  --serie-a: #D6E4F0;

  /* Form inputs */
  --input-bg: #ffffff;
  --input-text: #1d2327;

  /* Shadows */
  --shadow-color: rgba(49, 79, 89, 0.1);

  /* Radius scale — definitioner her; eksisterende page-CSS migreres senere. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --radius-full: 50%;
  /* Legacy alias — kortform brugt i cd-app.css og stand-cd-* */
  --radius: var(--radius-lg);

  /* Shadow scale — definitioner her; eksisterende page-CSS migreres senere.
     Brug --shadow-color for at få automatic dark mode adapt. */
  --shadow-xs: 0 1px 2px var(--shadow-color);
  --shadow-sm: 0 2px 6px var(--shadow-color);
  --shadow-md: 0 6px 18px var(--shadow-color);
  --shadow-lg: 0 12px 32px var(--shadow-color);
  --shadow-xl: 0 24px 60px var(--shadow-color);

  /* Accent-tinted shadow — bruges hvor shadow farves orange (target/highlight
     states i mini-heroes m.fl.). Adapter ikke til dark mode automatisk; det
     er bevidst da accent-glow også giver mening på mørk surface. */
  --shadow-accent: 0 4px 12px rgba(var(--brand-accent-rgb), 0.2);

  /* Typography */
  --font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;

  /* Type scale — body/utility (mirrors v3 design system colors_and_type.css) */
  --fs-xs:    0.72rem;   /* ~11.5px — kicker, status, meta */
  --fs-sm:    0.78rem;   /* ~12.5px — secondary meta */
  --fs-base:  0.875rem;  /* 14px */
  --fs-md:    0.9rem;
  --fs-lg:    1rem;      /* body */
  --fs-xl:    1.1rem;
  --fs-2xl:   1.3rem;
  --fs-3xl:   1.5rem;

  /* Display scale — marketing/forside hero text. Responsive clamps so the
     three forside-scener kan dele samme skala. */
  --fs-display-sm: clamp(15px, 1.6vw, 19px);   /* slide body */
  --fs-display-md: clamp(22px, 2.4vw, 30px);   /* hero exits prompt */
  --fs-display-lg: clamp(26px, 3.6vw, 44px);   /* manifest lede */
  --fs-display-xl: clamp(28px, 3.8vw, 48px);   /* news strip title */
  --fs-display-2xl: clamp(36px, 6vw, 64px);    /* slide nummer */

  /* Hero-titler på sub-pages (case, om, ai/filosofi). Standkort-scenen
     bruger sin egen mindre skala. */
  --fs-hero-title: clamp(36px, 5.5vw, 64px);

  /* H1/H2 — kanoniske heading-tokens (FIX R5: forside H1 var 48/700, kunder
     H1 var 52/300, pakker "H2" var 13.6/700 eyebrow-label. Brug disse tokens
     på tværs af sider for at få konsistent visuel hierarki). */
  --fs-h1: clamp(36px, 5vw, 52px);
  --fw-h1: 700;
  --ls-h1: -0.02em;
  --fs-h2: clamp(26px, 3.4vw, 40px);
  --fw-h2: 700;
  --ls-h2: -0.015em;
  --fs-h3: clamp(20px, 2.4vw, 28px);
  --fw-h3: 600;
  --ls-h3: -0.01em;

  /* Font weights — Figtree variable, range 300-700. Anything outside
     falder tavst tilbage på nærmeste i fonten. */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Letter-spacing */
  --ls-section: 0.08em;   /* uppercase section labels (kicker, eyebrow, status) */
  --ls-tight:   -0.02em;  /* display headings */

  /* Spacing */
  --space-xs: 0.25rem;
  --space-s: 0.5rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Sizing */
  --max-width: 1200px;
  --nav-height: 64px;

  /* Transitions */
  --transition: 0.2s ease;

  /* Breakpoints (brug i media queries — CSS-vars virker ikke i @media):
     --bp-sm: 480px  (lille mobil)
     --bp-md: 720px  (tablet/stor mobil)
     --bp-lg: 960px  (lille desktop)
     --bp-xl: 1200px (max-width container)
  */
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

/* Explicit dark mode via data-theme attribute */
[data-theme="dark"] {
  --bg: #182028;
  --surface: #243440;
  --surface-hover: #2a3e4c;
  --border: #354A56;
  --text: #d0dce4;
  --text-muted: #a8b5c4;

  /* Brand tokens adapt for contrast on dark backgrounds */
  --brand-primary: #7fa8b6;
  --brand-primary-hover: #9ac0cc;
  --brand-primary-active: #6b96a4;
  --brand-highlight: #7FBEC6;
  /* Accent stays the same in both modes */
  --brand-accent: #B85A3A;
  --brand-accent-hover: #9A4830;
  --brand-accent-rgb: 184, 90, 58;

  /* Brand numeric scale - INVERT for dark mode contrast.
     In light mode --brand-30 (#1e2f36) is a dark muted teal used as
     secondary text. On dark backgrounds it becomes invisible. Override
     to the light-muted variant so the 42 components that use it
     (.standkort-scene__lede, .stand-hero-dash, .post__meta b, etc.)
     remain readable. Matches --text-muted value for consistency. */
  --brand-30: #a8b5c4;
  --brand-40: #8ea0b3;
  --brand-60: #9ac0cc;

  /* Legacy alias adapt for dark surfaces */
  --accent-soft: rgba(var(--brand-accent-rgb), 0.18);

  /* Form inputs */
  --input-bg: #1c2c36;
  --input-text: #d0dce4;

  /* Shadows use darker base in dark mode */
  --shadow-color: rgba(0, 0, 0, 0.35);

  /* Series colors - slightly muted for dark mode */
  --serie-b: #1e3a2a;
  --serie-c: #3a2a1e;
  --serie-d: #2a2a2a;
  --serie-a: #1e2a3a;
}

/* Auto-detection: follow OS preference unless user explicitly chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #182028;
    --surface: #243440;
    --surface-hover: #2a3e4c;
    --border: #354A56;
    --text: #d0dce4;
    --text-muted: #a8b5c4;

    --brand-primary: #7fa8b6;
    --brand-primary-hover: #9ac0cc;
    --brand-primary-active: #6b96a4;
    --brand-highlight: #7FBEC6;
    --brand-accent: #B85A3A;
    --brand-accent-hover: #9A4830;
    --brand-accent-rgb: 184, 90, 58;

    --accent-soft: rgba(var(--brand-accent-rgb), 0.18);

    --input-bg: #1c2c36;
    --input-text: #d0dce4;
    --shadow-color: rgba(0, 0, 0, 0.35);

    --serie-b: #1e3a2a;
    --serie-c: #3a2a1e;
    --serie-d: #2a2a2a;
    --serie-a: #1e2a3a;
  }
}

/* ====================================================================
   Web Awesome brand-tokens (porteret 1:1 fra v3 theme.css linje 76-105).
   Disse overrules WA's default-tema (blue) til vores teal-brand.
   Bruges af <wa-button variant="brand">, <wa-callout variant="brand"> osv.
   Skal stå EFTER WA's themes/default.css i base.njk loading-rækkefølge.
   ==================================================================== */
:root {
  /* Brand (teal #314F59) */
  --wa-color-brand-95: #dce8ec; --wa-color-brand-90: #b0c8d1;
  --wa-color-brand-80: #7fa8b6; --wa-color-brand-70: #528898;
  --wa-color-brand-60: #3a6878; --wa-color-brand-50: #314F59;
  --wa-color-brand-40: #2a4049; --wa-color-brand-30: #1e2f36;
  --wa-color-brand-20: #141f24; --wa-color-brand-10: #0a1114;
  --wa-color-brand-05: #050a0d;

  /* Success (#00883C) */
  --wa-color-success-95: #f2f6f3; --wa-color-success-90: #e0e8e1;
  --wa-color-success-80: #bacdbd; --wa-color-success-70: #8bb693;
  --wa-color-success-60: #55a066; --wa-color-success-50: #00883C;
  --wa-color-success-40: #006b2c; --wa-color-success-30: #004f1d;
  --wa-color-success-20: #00350e; --wa-color-success-10: #001d01;
  --wa-color-success-05: #001200;

  /* Warning (#D4A017 golden) */
  --wa-color-warning-95: #f9f5ec; --wa-color-warning-90: #f0ece4;
  --wa-color-warning-80: #e2dacb; --wa-color-warning-70: #d8c9aa;
  --wa-color-warning-60: #d2b67d; --wa-color-warning-50: #D4A017;
  --wa-color-warning-40: #a27b18; --wa-color-warning-30: #775600;
  --wa-color-warning-20: #4c3500; --wa-color-warning-10: #281500;
  --wa-color-warning-05: #190600;

  /* Danger (#DC2626) */
  --wa-color-danger-95: #fff2ef; --wa-color-danger-90: #fcdfdb;
  --wa-color-danger-80: #f2bbb3; --wa-color-danger-70: #f09085;
  --wa-color-danger-60: #ea6156; --wa-color-danger-50: #DC2626;
  --wa-color-danger-40: #b4000c; --wa-color-danger-30: #870003;
  --wa-color-danger-20: #5d0000; --wa-color-danger-10: #380000;
  --wa-color-danger-05: #290000;

  /* Info (#2563EB) */
  --wa-color-info-95: #f0f5ff; --wa-color-info-90: #dae6fc;
  --wa-color-info-80: #b1c7f2; --wa-color-info-70: #81a8f4;
  --wa-color-info-60: #5287f3; --wa-color-info-50: #2563EB;
  --wa-color-info-40: #0846cc; --wa-color-info-30: #0025ae;
  --wa-color-info-20: #001b72; --wa-color-info-10: #000b44;
  --wa-color-info-05: #000037;

  /* wa-cloak: skjul indtil WA-komponenter er defined (FOUC-prevention).
     Skript i base.njk fjerner .wa-cloak når customElements.whenDefined() resolver
     for kerne-komponenter, eller efter 2.5s safety-timeout. */
  --wa-color-brand: var(--wa-color-brand-50);
  --wa-color-brand-on: #fff;
}

html.wa-cloak { visibility: hidden; }
html.wa-ready { visibility: visible; }