/* ── CYBER EYES DESIGN SYSTEM TOKENS ─────────────────────────────────── */
/* Source: Figma file otW9ZrteSDEfGqDhrR6RD6 · Design System page 93:2   */
/* Two-tier model: primitives (--_name) → semantic (--name)               */

:root {

  /* ── Primitives ─────────────────────────────────────────────────────── */
  --_teal:      #32B493;
  --_pink:      #FF3163;
  --_pink-light: #FF7491;
  --_pink-dark: #FF4D6D;
  --_coral:     #F16A54;
  --_white:     #FFFFFF;
  --_gray-33:   #333333;
  --_gray-55:   #555555;
  --_gray-66:   #666666;
  --_gray-cc:   #CCCCCC;
  --_gray-ec:   #ECECEC;
  --_bg-page:   #FBFCFE;
  --_bg-card:   #F8F9FB;

  /* ── Color — Semantic ───────────────────────────────────────────────── */
  --color-brand:       var(--_teal);
  --color-accent:      var(--_pink);
  --color-coral:       var(--_coral);
  --color-text:        var(--_gray-33);
  --color-text-mid:    var(--_gray-55);
  --color-text-light:  var(--_gray-66);
  --color-bg:          var(--_bg-page);
  --color-bg-card:     var(--_bg-card);
  --color-border:      var(--_gray-ec);
  --color-border-mid:  var(--_gray-cc);
  --color-marker:      var(--_pink-dark);
  --color-white:       var(--_white);

  /* ── Typography — Families ──────────────────────────────────────────── */
  --font-heading: 'Fakt', sans-serif;
  --font-body:    'Work Sans', sans-serif;

  /* ── Typography — Sizes (rem, root = 10px) ──────────────────────────── */
  --fs-h1:    4.2rem;
  --fs-h2:    2.5rem;
  --fs-h3-lg: 2.8rem;
  --fs-h3-sm: 1.7rem;
  --fs-body:  1.6rem;
  --fs-nav:   1.4rem;
  --fs-small: 1.4rem; /* same value as --fs-nav; kept separate as they may diverge */

  /* ── Typography — Line Heights ──────────────────────────────────────── */
  --lh-heading: 1.5;
  --lh-body:    1.7;
  --lh-section: 2;

  /* ── Spacing (8px base, matches Figma spacing panel) ────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Buttons ─────────────────────────────────────────────────────────── */
  --btn-radius:           10px;
  --btn-padding:          .5em 1.4em;
  --btn-width:            230px;

  --btn-primary-bg:       var(--color-accent);
  --btn-primary-fg:       var(--color-white);
  --btn-primary-hover-bg: var(--_pink-light);

  --btn-outlined-bg:      transparent;
  --btn-outlined-fg:      var(--color-brand);
  --btn-outlined-border:  var(--color-brand);

  --btn-accent-bg:        var(--color-coral);
  --btn-accent-fg:        var(--color-white);

  --btn-teal-bg:          var(--color-brand);
  --btn-teal-fg:          var(--color-white);

  /* ── Navigation ─────────────────────────────────────────────────────── */
  --nav-height:      132px;
  --nav-bg:          var(--color-white);
  --nav-border:      1px solid var(--color-border);
  --nav-shadow:      0 1px 3px rgba(0,0,0,0.10);
  --nav-link-color:  var(--color-text-mid);
  --nav-link-size:   var(--fs-nav);

  /* ── Footer ─────────────────────────────────────────────────────────── */
  --footer-bg:      var(--color-white);
  --footer-border:  1px solid var(--color-border);
  --footer-shadow:  0 -4px 6px rgba(0,0,0,0.10);

  /* ── Cards & Containers ─────────────────────────────────────────────── */
  --card-bg:       var(--color-white);
  --card-border:   1px solid var(--color-border-mid);
  --card-padding:  var(--space-4);

  /* ── Border Radius ──────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 50%;
}