/* Design tokens: OeGB-Edition "Einfach erklärt" (Arbeitstitel)
   Plain CSS custom properties, no build step. Light theme only (brief: no dark mode).
   Documentation and contrast table: .design/tokens.md

   BRAND SWAP: change only --brand. Hover/active/tint/text-red derive from it.
   After a swap, recheck the contrast table in tokens.md (white on --brand >= 4.5:1,
   --color-primary-text on --color-surface >= 4.5:1).
   PLACEHOLDER: #E10010 is an unverified value from a third-party source. */

:root {
  color-scheme: light;

  /* ---- Brand (single source) ---- */
  --brand: #E10010;

  /* ---- Colour roles ---- */
  --color-bg: #F5F5F2;                 /* page background */
  --color-surface: #FFFFFF;            /* cards, inputs, dialogs */
  --color-surface-sunken: #ECECE8;     /* wells, code, progress track area */
  --color-text: #1A1C20;
  --color-text-muted: #4B4F58;
  --color-border: #D5D5D0;             /* decorative dividers, card edges (not a control border) */
  --color-border-strong: #767B85;      /* control borders, icons, progress track: >= 3:1 */

  --color-primary: var(--brand);                                        /* button fill */
  --color-primary-fg: #FFFFFF;                                          /* text on primary */
  --color-primary-hover: color-mix(in srgb, var(--brand) 84%, #000);
  --color-primary-active: color-mix(in srgb, var(--brand) 70%, #000);
  --color-primary-text: color-mix(in srgb, var(--brand) 78%, #000);     /* red as text/link on light */
  --color-primary-tint: color-mix(in srgb, var(--brand) 8%, #fff);      /* selected row, term mark */
  --color-primary-tint-border: color-mix(in srgb, var(--brand) 30%, #fff);

  --color-focus: #0B57D0;              /* focus ring, deliberately not brand red */

  /* Status: hues differ from brand red; always shown with icon + text */
  --color-danger: #A1114F;             /* raspberry, not brand red */
  --color-danger-fg: #FFFFFF;
  --color-danger-bg: #FBE9F1;
  --color-danger-text: #6E0B35;

  --color-success: #17703A;
  --color-success-fg: #FFFFFF;
  --color-success-bg: #E8F5EC;
  --color-success-text: #0F5B2E;

  --color-warning: #8A5300;            /* icon and border on warning-bg */
  --color-warning-bg: #FFF3D1;
  --color-warning-text: #5C3A00;

  --color-info: #0B57D0;
  --color-info-fg: #FFFFFF;
  --color-info-bg: #E8F0FB;
  --color-info-text: #0A3F7A;

  --color-disabled-fg: #5E626B;
  --color-disabled-bg: #E4E4E0;

  /* ---- Typography ---- */
  /* Fonts are self-hosted later (see tokens.md); system fallbacks carry until then. */
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-body);    /* swap to Lexend or house font here only */
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;

  /* Scale: ratio 1.25 from 18px body; 16px for UI controls; 14.4px floor for captions */
  --text-caption: 0.9rem;     /* 14.4px / 1.45 */
  --text-ui: 1rem;            /* 16px   / 1.5  buttons, labels, badges */
  --text-body: 1.125rem;      /* 18px   / 1.6  */
  --text-h3: 1.4rem;          /* 22.4px / 1.35 */
  --text-h2: 1.75rem;         /* 28px   / 1.25 */
  --text-h1: 2.2rem;          /* 35.2px / 1.2  */
  --leading-caption: 1.45;
  --leading-ui: 1.5;
  --leading-body: 1.6;
  --leading-h3: 1.35;
  --leading-h2: 1.25;
  --leading-h1: 1.2;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --measure: 68ch;            /* text line length 45-75 characters */

  /* ---- Spacing (base 4px) ---- */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --size-touch: 2.75rem;  /* 44px minimum target */
  --container: 70rem;     /* 1120px */

  /* ---- Radii ---- */
  --radius-sm: 4px;     /* chips, term marks */
  --radius-md: 8px;     /* buttons, inputs */
  --radius-lg: 12px;    /* cards, dialogs */
  --radius-pill: 999px; /* status badges */

  /* ---- Shadows (restrained) ---- */
  --shadow-card: 0 1px 2px rgb(26 28 32 / 0.08);
  --shadow-raised: 0 4px 12px rgb(26 28 32 / 0.12);
  --shadow-dialog: 0 12px 32px rgb(26 28 32 / 0.20);
  --color-scrim: rgb(26 28 32 / 0.55);

  /* ---- Focus ---- */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring: var(--focus-ring-width) solid var(--color-focus);

  /* ---- Motion ---- */
  --duration-fast: 120ms;   /* hover, press */
  --duration-base: 200ms;   /* disclosure, badge change */
  --duration-slow: 320ms;   /* dialog, sheet */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Flyer (PNG 1080x1350, fixed pixel canvas; shared with server-side renderer) ---- */
  --flyer-width: 1080px;
  --flyer-height: 1350px;
  --flyer-margin: 72px;                 /* safe margin on all sides */
  --flyer-gap: 40px;
  --flyer-band-height: 440px;           /* brand band with headline */
  --flyer-bg: #FFFFFF;
  --flyer-band-bg: var(--brand);
  --flyer-band-fg: #FFFFFF;
  --flyer-text: var(--color-text);
  --flyer-text-muted: var(--color-text-muted);
  --flyer-accent: var(--color-primary-text);
  --flyer-note-bg: var(--color-primary-tint);
  --flyer-headline-size: 92px;          /* max 3 lines */
  --flyer-headline-leading: 1.08;
  --flyer-point-size: 52px;             /* 3-4 key statements */
  --flyer-point-leading: 1.25;
  --flyer-note-size: 40px;              /* floor: about 13px on a 360px phone */
  --flyer-note-leading: 1.3;
  --flyer-radius: 24px;
  --flyer-logo-width: 320px;            /* logo placeholder box */
  --flyer-logo-height: 112px;
  --flyer-logo-clearspace: 32px;        /* nothing inside this distance around the logo */
  --flyer-logo-border: 4px dashed var(--color-border-strong);
}

/* Breakpoints (media queries cannot use variables; values are binding):
   --bp-sm 480px, --bp-md 768px, --bp-lg 1024px, --bp-xl 1440px. Mobile first, min-width. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}