/* ============================================================
   CALVION TECHNOLOGIES
   tokens.css — Design Token System
   All values are sourced from here. Never use raw values.
   ============================================================ */



:root {

  /* ── Brand Colors (use sparingly: CTAs, hover accents only) ── */
  --color-brand-red:            #d82d2d;
  --color-brand-blue:           #2937b8;
  --color-brand-green:          #2e9e2b;
  --color-accent-hover:         #c12626;

  /* ── Neutral System (95% of the UI) ── */
  --color-white:                #ffffff;
  --color-off-white:            #f7f7f8;
  --color-light-gray:           #eeeff1;
  --color-mid-gray:             #d1d3d8;
  --color-steel:                #8a8f9a;
  --color-graphite:             #5a5f6b;
  --color-charcoal:             #2e3138;
  --color-near-black:           #1a1c21;

  /* ── Semantic Color Assignments ── */
  --color-text-primary:         var(--color-near-black);
  --color-text-secondary:       var(--color-graphite);
  --color-text-tertiary:        var(--color-steel);
  --color-text-inverse:         var(--color-white);
  --color-text-inverse-muted:   rgba(255, 255, 255, 0.55);

  --color-bg-primary:           var(--color-white);
  --color-bg-secondary:         var(--color-off-white);
  --color-bg-dark:              var(--color-near-black);
  --color-bg-charcoal:          var(--color-charcoal);

  --color-border:               var(--color-light-gray);
  --color-border-subtle:        rgba(0, 0, 0, 0.06);
  --color-border-strong:        var(--color-mid-gray);
  --color-border-inverse:       rgba(255, 255, 255, 0.10);

  --color-accent:               var(--color-brand-red);
  --color-link:                 var(--color-brand-blue);

  /* ── Typography ── */
  --font-primary:               'Inter', -apple-system, BlinkMacSystemFont,
                                'Segoe UI', Helvetica, Arial, sans-serif;

  /* Type Scale — rem-based (root 16px) */
  --text-xs:                    0.75rem;      /* 12px */
  --text-sm:                    0.875rem;     /* 14px */
  --text-base:                  1rem;         /* 16px */
  --text-md:                    1.125rem;     /* 18px */
  --text-lg:                    1.25rem;      /* 20px */
  --text-xl:                    1.5rem;       /* 24px */
  --text-2xl:                   2rem;         /* 32px */
  --text-3xl:                   2.5rem;       /* 40px */
  --text-4xl:                   3rem;         /* 48px */
  --text-5xl:                   3.75rem;      /* 60px */
  --text-6xl:                   4.5rem;       /* 72px */

  /* Font Weights */
  --weight-regular:             400;
  --weight-medium:              500;
  --weight-semibold:            600;

  /* Line Heights */
  --leading-tight:              1.15;
  --leading-snug:               1.3;
  --leading-normal:             1.65;
  --leading-relaxed:            1.8;

  /* Letter Spacing */
  --tracking-tight:             -0.025em;
  --tracking-normal:            0em;
  --tracking-wide:              0.04em;
  --tracking-caps:              0.11em;

  /* ── Spacing (8px base unit) ── */
  --space-1:                    0.25rem;      /* 4px */
  --space-2:                    0.5rem;       /* 8px */
  --space-3:                    0.75rem;      /* 12px */
  --space-4:                    1rem;         /* 16px */
  --space-5:                    1.25rem;      /* 20px */
  --space-6:                    1.5rem;       /* 24px */
  --space-8:                    2rem;         /* 32px */
  --space-10:                   2.5rem;       /* 40px */
  --space-12:                   3rem;         /* 48px */
  --space-16:                   4rem;         /* 64px */
  --space-20:                   5rem;         /* 80px */
  --space-24:                   6rem;         /* 96px */
  --space-32:                   8rem;         /* 128px */

  /* Section Rhythm */
  --section-padding-y:          6rem;         /* 96px */
  --section-padding-y-sm:       4rem;         /* 64px mobile */

  /* Container */
  --container-max:              1200px;
  --container-wide:             1360px;
  --container-narrow:           760px;
  --container-px:               1.5rem;       /* 24px side padding */

  /* ── Border Radius (restrained) ── */
  --radius-sm:                  2px;
  --radius-md:                  4px;
  --radius-lg:                  6px;

  /* ── Shadows ── */
  --shadow-xs:                  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:                  0 1px 3px rgba(0, 0, 0, 0.06),
                                0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:                  0 4px 12px rgba(0, 0, 0, 0.07);
  --shadow-lg:                  0 8px 28px rgba(0, 0, 0, 0.09);

  /* ── Transitions ── */
  --transition-fast:            150ms ease;
  --transition-base:            250ms ease;
  --transition-slow:            400ms ease;
  --transition-smooth:          500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Z-Index ── */
  --z-base:                     1;
  --z-above:                    10;
  --z-navbar:                   900;
  --z-dropdown:                 910;
  --z-fab:                      800;
  --z-modal:                    2000;

  /* ── Navbar ── */
  --navbar-height:              68px;
  --navbar-height-sm:           58px;

  /* ── Logo ── */
  --navbar__logo-img : 68px;
}