/* ============================================================
   PROTONVIX — DESIGN TOKENS
   Single source of truth for all design values
   ============================================================ */

:root {
  /* ============================================================
     monday.com Brand Palette & Accents
     ============================================================ */
  --monday-purple: #6161FF;      /* Primary CTA, brand highlights */
  --monday-dark: #000000;        /* Pure black hero, footer backgrounds */
  --monday-light: #F0F3FF;       /* Muted purple-white alternate section bg */
  --white: #FFFFFF;              /* Primary background surface */

  /* Status / Secondary Brand Accents */
  --monday-green: #00CA72;       /* Success states, "Done" markers */
  --monday-yellow: #FFCC00;      /* Warning, "Working on it" warm elements */
  --monday-red: #FB275D;         /* Error, critical path, "Stuck" indicators */

  /* Typography Colors */
  --text-primary: #000000;       /* Pure black for maximum darkness */
  --text-secondary: #000000;     /* Pure black for secondary text too */
  --text-light: #FFFFFF;         /* Inverted text on dark/purple panels */

  /* Borders & Shadows */
  --border-color: #E6E9EF;       /* Layout dividers and subtle component rims */
  --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --card-hover-shadow: 0 8px 32px rgba(97, 97, 255, 0.15);

  /* --- Colors mapped to ProtonVix semantic tokens --- */
  --color-bg-primary:    var(--white);
  --color-bg-secondary:  var(--monday-light);
  --color-surface:       var(--white);
  --color-gold:          var(--monday-purple);
  --color-gold-dim:      rgba(97, 97, 255, 0.40);
  --color-gold-glow:     rgba(97, 97, 255, 0.07);
  --color-platinum:      var(--monday-dark);
  --color-text-primary:  var(--text-primary);
  --color-text-muted:    var(--text-secondary);
  --color-border:        var(--border-color);

  /* --- Typography --- */
  --font-serif: 'Poppins', 'Inter', 'Helvetica Neue', sans-serif;
  --font-sans:  'Figtree', 'Inter', 'Helvetica Neue', system-ui, sans-serif;

  /* Font sizes — fluid scale */
  --text-label:   0.6875rem;   /* 11px */
  --text-sm:      0.875rem;    /* 14px */
  --text-base:    1rem;        /* 16px */
  --text-lg:      1.125rem;    /* 18px */
  --text-xl:      1.25rem;     /* 20px */
  --text-2xl:     1.5rem;      /* 24px */
  --text-3xl:     2rem;        /* 32px */
  --text-4xl:     2.75rem;     /* 44px */
  --text-5xl:     3.75rem;     /* 60px */
  --text-6xl:     5rem;        /* 80px */
  --text-7xl:     7rem;        /* 112px */
  --text-stat:    10rem;       /* 160px — editorial stat numerals */

  /* Font weights */
  --fw-extralight: 200;
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* Line heights */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.6;

  /* Letter spacing */
  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:   0.02em;
  --ls-label:  0.15em;

  /* --- Spacing --- */
  --space-1:   0.2rem;
  --space-2:   0.4rem;
  --space-3:   0.6rem;
  --space-4:   0.8rem;
  --space-5:   1rem;
  --space-6:   1.2rem;
  --space-8:   1.6rem;
  --space-10:  2rem;
  --space-12:  2.4rem;
  --space-16:  3.2rem;
  --space-20:  4rem;
  --space-24:  4.8rem;
  --space-32:  6rem;
  --space-40:  8rem;

  /* --- Layout --- */
  --max-width:       1200px; /* Aligned with monday.com container max width */
  --content-width:   1100px;
  --gutter-desktop:  clamp(2rem, 6vw, 7.5rem);
  --gutter-mobile:   1.25rem;

  /* --- Borders & Radius --- */
  --radius-sm:   3px;           /* Crisp, clean borders */
  --radius:      6px;           /* Rounded cards */
  --radius-button: 20px;
  --border-width: 1px;

  /* --- Shadows --- */
  --shadow-card:    var(--card-shadow);
  --shadow-gold:    0 6px 20px rgba(97, 97, 255, 0.40);
  --shadow-hover:   var(--card-hover-shadow);

  /* --- Transitions --- */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:  0.15s;
  --duration-base:  0.3s;
  --duration-slow:  0.6s;

  /* --- Z-index scale --- */
  --z-base:    1;
  --z-overlay: 10;
  --z-nav:     100;
  --z-modal:   1000;
}