/* promedea design tokens — source: Dizajn manual promedea v5 (08/2026) */

:root {
  /* Core palette */
  --fire: #FFC400;        /* Ohen — action color: CTA, highlights, covers. Never decoration. */
  --magic: #6D28D9;       /* Magia — accent and glow: links, modules, merch */
  --ink: #0E0B14;         /* Atrament — dark surfaces, text on light */
  --paper: #FFFFFF;       /* Papier — text on dark, print base */
  --bg: #080610;          /* page background (web) */
  --surface: #16121F;     /* solid dark surface (area split) */

  /* Purple range */
  --magic-light: #A78BFA; /* violet accent text on dark, 7.4:1 */
  --magic-deep: #3B1878;  /* text on yellow surfaces */
  --gradient-brand: linear-gradient(90deg, #7C3AED, #5B21B6, #3B1878); /* brand plane + ambient glow only; never button fill, text, or charts */

  /* Text on dark (vs --bg) */
  --fg: #EDEAF5;          /* main text, 16.9:1 */
  --fg-secondary: #C6C0D4;/* secondary text, 11.4:1 */
  --fg-muted: #9C93AE;    /* card copy, 6.9:1 */
  --fg-faint: #7E7690;    /* small labels only, 4.7:1, min 10px caps */

  /* Character colors — only in a character's cloak, nameplate, and module */
  --char-raul: #6D28D9;
  --char-samo: #2ECC5B;
  --char-marek: #FFFFFF;
  --char-veronika: #E5399B;
  --char-piaty: #22D3EE;

  /* Semantic */
  --danger: #FF3B5C;
  --danger-surface: rgba(187, 30, 60, 0.08);
  --danger-border: rgba(187, 30, 60, 0.3);

  /* Glass on dark */
  --glass-bg: rgba(255, 255, 255, 0.035);
  --glass-bg-strong: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-blur: 14px;
  --hairline: rgba(255, 255, 255, 0.1);

  /* Glow instead of shadow — no gray drop-shadows in this brand */
  --glow-fire: 0 0 40px -6px rgba(255, 196, 0, 0.8);
  --glow-fire-soft: 0 0 34px -8px rgba(255, 196, 0, 0.55);
  --glow-magic: 0 0 44px -6px rgba(124, 58, 237, 0.95);
  --glow-magic-soft: 0 0 34px -8px rgba(124, 58, 237, 0.7);

  /* Type */
  --font-display: 'Michroma', Helvetica, Arial, sans-serif; /* headings + labels only, never long text */
  --font-body: 'Archivo', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Spacing scale: 4 8 16 24 32 44 88 — no other values */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 44px;
  --space-7: 88px;

  /* Radii: sharp edges only on solid color planes */
  --radius-sm: 14px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 99px;

  /* Grid */
  --content-max: 1240px;
  --gutter: 16px;
  --page-pad: 24px; /* 12px on mobile */

  /* Motion: color/border/glow 0.3s ease, lift -2px; nothing over 0.4s */
  --transition: 0.3s ease;
  --hover-lift: translateY(-2px);
}