/* ============================================================
   SmartConnect Solutions — Design Tokens
   Single source of truth. Nothing visual is defined with a raw
   value anywhere else; every color / size / space references a
   token below. Tailwind (js/tw-config.js) maps onto these same
   custom properties so utilities and hand-written CSS never drift.
   Brand: Black / Blue / Gray. Motif: the NFC tap ripple.
   ============================================================ */

:root {
  /* -- Brand core (from spec 7.2) -------------------------- */
  --color-ink:        #0B0B0F;   /* primary text, primary buttons (Black) */
  --color-blue:       #1F4E8C;   /* accent, links, social highlights (Blue) */
  --color-blue-600:   #1A3F73;   /* button / link hover */
  --color-gray:       #8A9099;   /* borders & decorative gray only */
  --color-gray-100:   #F4F5F7;   /* muted surface / cards */
  --color-surface:    #FFFFFF;   /* page background */

  /* -- Extended palette (same Black/Blue/Gray family) ------ */
  --color-ink-800:    #14141B;   /* raised dark surface */
  --color-ink-700:    #1E1E28;   /* cards on dark */
  --color-blue-400:   #4C86E0;   /* signal / ripple glow */
  --color-blue-300:   #7FB0FF;   /* bright signal on dark */
  --color-blue-050:   #EAF1FB;   /* blue tint chips / surfaces */
  --color-gray-500:   #5A6069;   /* secondary text (AA on white) */
  --color-gray-300:   #C7CCD3;   /* light borders */

  --color-line:       rgba(11, 11, 15, 0.08);
  --color-line-dark:  rgba(255, 255, 255, 0.12);
  --color-ink-invert: #F6F7F9;
  --color-ink-invert-muted: #A7ADB8;

  /* -- Semantic aliases ------------------------------------ */
  --color-text:            var(--color-ink);
  --color-text-secondary:  var(--color-gray-500);
  --color-bg:              var(--color-surface);
  --color-bg-muted:        var(--color-gray-100);
  --color-accent:          var(--color-blue);
  --color-accent-hover:    var(--color-blue-600);

  /* -- Typography ------------------------------------------ */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  --font-sans:    "Hanken Grotesk", ui-sans-serif, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;

  --fs-eyebrow:  0.75rem;
  --fs-caption:  0.8125rem;
  --fs-body:     1rem;
  --fs-body-lg:  1.125rem;
  --fs-h3:       1.25rem;
  --fs-h2:       1.5rem;
  --fs-h1:       2rem;
  --fs-display:  2.5rem;
  --fs-hero:     clamp(2.75rem, 6vw, 4.75rem);

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.5;
  --lh-relaxed:  1.6;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --ls-tighter: -0.03em;
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.08em;
  --ls-wider:   0.2em;

  /* -- Spacing (4px rhythm, coarse fixed scale) ------------ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* -- Component sizes (4px-aligned; used for controls) ---- */
  --size-mark:        32px;
  --size-control-sm:  40px;
  --size-touch:       44px;   /* min touch target */
  --size-control:     48px;   /* buttons / inputs */
  --size-icon:        52px;
  --size-chip:        34px;   /* social buttons */
  --size-control-lg:  56px;
  --size-avatar-sm:   64px;
  --size-avatar:      128px;
  --size-qr:          220px;
  --size-device:      320px;
  --size-modal:       360px;
  --size-profile:     520px;
  --size-switch-h:    24px;   /* toggle track height */
  --size-switch-knob: 20px;   /* toggle knob + travel */

  --border-thin: 1px;
  --border:      1.5px;

  /* -- Radii ----------------------------------------------- */
  --radius-sm:   8px;
  --radius-card: 16px;
  --radius-lg:   24px;
  --radius-xl:   32px;   /* bold mosaic blocks */
  --radius-pill: 999px;

  /* -- Shadows --------------------------------------------- */
  --shadow-card: 0 2px 8px rgba(11, 11, 15, 0.08);
  --shadow-md:   0 8px 24px rgba(11, 11, 15, 0.10);
  --shadow-lg:   0 20px 50px rgba(11, 11, 15, 0.18);
  --shadow-glow: 0 0 44px rgba(76, 134, 224, 0.45);

  /* -- Layout ---------------------------------------------- */
  --container:        1200px;
  --container-narrow: 720px;
  --nav-h:            72px;

  /* -- Measures (content widths, no scattered magic numbers) */
  --measure-intro:         40rem;  /* section intro copy block */
  --measure-intro-sm:      35rem;  /* narrower intro block */
  --measure-heading:       18ch;   /* punchy heading line length */
  --measure-heading-tight: 16ch;
  --measure-copy:          46ch;   /* body line length */

  /* -- Motion ---------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  150ms;
  --dur:       300ms;
  --dur-slow:  600ms;

  --focus-ring: 0 0 0 3px rgba(31, 78, 140, 0.45);
}