/* ============================================
   APEX CONTROLLERS — DESIGN TOKENS
   Edit colors/spacing/fonts globally from here.
   ============================================ */

:root {
  /* ---- Colors: Surface (deeper black for luxury feel) ---- */
  --c-bg:           #050505;
  --c-bg-deep:      #020202;
  --c-surface-1:    rgba(14, 14, 16, 0.72);
  --c-surface-2:    rgba(18, 18, 20, 0.78);
  --c-surface-3:    rgba(24, 24, 28, 0.82);
  --c-surface-4:    rgba(32, 32, 38, 0.88);

  /* ---- Colors: Borders ---- */
  --c-border:       rgba(255, 255, 255, 0.06);
  --c-border-strong:rgba(255, 255, 255, 0.12);
  --c-border-red:   rgba(255, 0, 0, 0.45);                  /* matched op #ff0000 */

  /* ---- Colors: Brand (felrood, sitewide accent) ----
     --c-red       = vlak/knop/border/accent kleur
     --c-red-text  = idem voor tekst (zelfde tint, met text-shadow voor scherpte)
     --c-red-bright/-dark/-deep = hover- en diepte-varianten (donker → licht) */
  --c-red:          #ff0000;
  --c-red-text:     #ff0000;
  --c-red-bright:   #ff3333;
  --c-red-dark:     #cc0000;
  --c-red-deep:     #990000;
  --c-red-glow:     rgba(255, 0, 0, 0.6);
  --c-red-soft:     rgba(255, 0, 0, 0.14);
  --c-red-accent:   #ff0000;

  /* Bordeaux + metallic zilver — premium accenten (o.a. navigatie/dropdown) */
  --c-bordeaux:      #7d2231;
  --c-bordeaux-line: rgba(125, 34, 49, 0.55);
  --c-bordeaux-soft: rgba(125, 34, 49, 0.18);
  --c-silver:        #c9ccd4;
  --c-silver-line:   rgba(201, 204, 212, 0.16);
  /* Subtiele text-shadow voor rode kop-tekst op licht/contrast-zwakke bg.
     1 px donkere outline + 1 px schaduw → leest scherper zonder 'glow'. */
  --shadow-red-text: 0 1px 0 rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.4);

  /* ---- Colors: Text ---- */
  --c-text:         #fafafa;
  --c-text-dim:     #b3b3bd;
  --c-text-muted:   #8a8a95;   /* was #75757f — te laag contrast (4.0:1) voor kleine tekst */
  --c-text-faint:   #50505a;

  /* ---- Semantic ---- */
  --c-success:      #00ff50;        /* Apex-groen — succes, cadeau, op voorraad */
  --apex-green:     #00ff50;        /* alias voor expliciete brand-references */
  --apex-green-soft: rgba(0, 255, 80, 0.12);
  --apex-green-border: rgba(0, 255, 80, 0.35);
  --c-warning:      #f59e0b;
  --c-error:        #ef4444;

  /* ---- Typography ---- */
  --font-display:   "Saira Condensed", "Bebas Neue", system-ui, sans-serif;
  --font-body:      "Manrope", "Inter", system-ui, sans-serif;
  --font-mono:      "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  --fs-xs:    0.75rem;   /* 12px */
  --fs-sm:    0.875rem;  /* 14px */
  --fs-base:  1rem;      /* 16px */
  --fs-md:    1.125rem;  /* 18px */
  --fs-lg:    1.375rem;  /* 22px */
  --fs-xl:    1.75rem;   /* 28px */
  --fs-2xl:   2.25rem;   /* 36px */
  --fs-3xl:   3rem;      /* 48px */
  --fs-4xl:   4rem;      /* 64px */
  --fs-5xl:   5.5rem;    /* 88px */
  --fs-hero:  clamp(2.75rem, 7vw, 6rem);

  --lh-tight: 0.95;
  --lh-snug:  1.15;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  --ls-tight:  -0.025em;
  --ls-base:   0;
  --ls-wide:   0.08em;
  --ls-wider:  0.18em;

  --fw-light: 300;
  --fw-reg:   400;
  --fw-med:   500;
  --fw-semi:  600;
  --fw-bold:  700;
  --fw-black: 900;

  /* ---- Spacing scale (luxury Apple-like rhythm — generous breathing room) ---- */
  --s-1:  0.25rem;  /* 4 */
  --s-2:  0.5rem;   /* 8 */
  --s-3:  0.75rem;  /* 12 */
  --s-4:  1rem;     /* 16 */
  --s-5:  1.5rem;   /* 24 */
  --s-6:  2.25rem;  /* 36 */
  --s-7:  3rem;     /* 48 */
  --s-8:  4rem;     /* 64 */
  --s-9:  5.5rem;   /* 88 */
  --s-10: 7rem;     /* 112 */
  --s-12: 9rem;     /* 144 */
  --s-14: 12rem;    /* 192 */

  /* ---- Radius ---- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.6);
  --shadow-xl:  0 32px 80px rgba(0,0,0,0.7);
  --shadow-red: 0 16px 48px rgba(225, 29, 46, 0.35);
  --shadow-red-sm: 0 4px 16px rgba(225, 29, 46, 0.25);
  --inset-top:  inset 0 1px 0 rgba(255,255,255,0.04);

  /* ---- Layout ---- */
  --container:    1280px;
  --container-sm: 960px;
  --container-xs: 720px;
  --gutter:       clamp(1rem, 4vw, 2rem);
  --nav-h:        84px;

  /* ---- Motion ---- */
  --t-fast:   140ms;
  --t-base:   220ms;
  --t-slow:   400ms;
  --t-slower: 700ms;
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.5,1.4,.5,1);

  /* ---- Z-index ladder ---- */
  --z-base: 1;
  --z-deco: 5;
  --z-nav:  50;
  --z-overlay: 80;
  --z-modal: 100;
  --z-toast: 200;
}

/* Soft red gradient (used as hairline borders + glows) */
:root {
  --grad-red-edge: linear-gradient(135deg, rgba(255, 0, 0, 0.55) 0%, rgba(255, 0, 0, 0) 60%);
  --grad-red-fill: linear-gradient(135deg, var(--c-red) 0%, var(--c-red-dark) 100%);
  --grad-surface:  linear-gradient(180deg, rgba(14, 14, 16, 0.78) 0%, rgba(8, 8, 10, 0.88) 100%);
  --grad-spotlight: radial-gradient(circle at 50% 30%, rgba(255, 0, 0, 0.22), transparent 60%);

  /* Glass panel default */
  --glass-bg:     rgba(14, 14, 16, 0.55);
  --glass-blur:   blur(20px) saturate(140%);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
}