/* ============================================================
   SMOCELL — Design Tokens
   Single source of truth. No arbitrary values in component CSS.
   ============================================================ */

:root {
  /* ---------- Color ---------- */
  --c-bg:            #F7F8FA;   /* primary light surface */
  --c-bg-soft:       #EFF1F4;   /* soft gray section     */
  --c-surface:       #FFFFFF;   /* raised light surface  */
  --c-ink:           #08090A;   /* primary text          */
  --c-ink-2:         #3D4249;   /* secondary text        */
  --c-ink-3:         #7A8087;   /* tertiary / captions   */
  --c-line:          rgba(8, 9, 10, 0.10);
  --c-line-strong:   rgba(8, 9, 10, 0.18);

  --c-dark:          #080A0C;   /* dark section base     */
  --c-dark-2:        #0C0F12;   /* dark raised           */
  --c-dark-3:        #12161B;   /* dark higher           */
  --c-dark-line:     rgba(255, 255, 255, 0.09);
  --c-dark-ink:      #F4F6F8;
  --c-dark-ink-2:    #A6ADB5;
  --c-dark-ink-3:    #6A7178;

  --c-accent:        #00CDBD;   /* SMOCELL turquoise     */
  --c-accent-deep:   #00A99C;   /* hover / on-light text-safe */
  --c-accent-ink:    #007A71;   /* AA text on light bg   */
  --c-accent-soft:   rgba(0, 205, 189, 0.10);
  --c-accent-glow:   rgba(0, 205, 189, 0.32);

  --c-danger:        #E5484D;
  --c-danger-soft:   rgba(229, 72, 77, 0.10);
  --c-ok:            #30A46C;
  --c-ok-soft:       rgba(48, 164, 108, 0.12);

  /* ---------- Typography ---------- */
  --font-display: "Clash Display", "Segoe UI Variable Display", -apple-system, sans-serif;
  --font-body:    "Switzer", "Segoe UI Variable Text", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Cascadia Code", "SF Mono", ui-monospace, "Consolas", monospace;

  /* Fluid type scale (mobile -> desktop) */
  --t-hero:    clamp(2.75rem, 1.2rem + 6.5vw, 7rem);      /* 44 -> 112 */
  --t-h1:      clamp(2.375rem, 1.4rem + 4vw,  5rem);      /* 38 -> 80  */
  --t-h2:      clamp(1.875rem, 1.2rem + 2.6vw, 3.5rem);   /* 30 -> 56  */
  --t-h3:      clamp(1.375rem, 1.1rem + 1.1vw, 2rem);     /* 22 -> 32  */
  --t-h4:      clamp(1.125rem, 1rem + 0.5vw, 1.375rem);   /* 18 -> 22  */
  --t-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17 -> 19  */
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-micro:   0.75rem;
  --t-label:   0.6875rem;                                  /* mono labels */

  --leading-tight: 0.98;
  --leading-head:  1.08;
  --leading-body:  1.6;

  --track-display: -0.03em;
  --track-head:    -0.02em;
  --track-label:    0.14em;

  /* ---------- Spacing ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  --section-pad: clamp(4rem, 3rem + 6vw, 9rem);
  --section-pad-sm: clamp(3rem, 2.25rem + 3.5vw, 6rem);

  /* ---------- Layout ---------- */
  --layout-max:    1320px;
  --layout-wide:   1520px;
  --layout-narrow: 880px;
  --layout-gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);

  /* ---------- Radius ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(8, 9, 10, 0.05), 0 2px 8px rgba(8, 9, 10, 0.04);
  --shadow-md: 0 2px 6px rgba(8, 9, 10, 0.05), 0 10px 28px rgba(8, 9, 10, 0.08);
  --shadow-lg: 0 4px 12px rgba(8, 9, 10, 0.06), 0 24px 64px rgba(8, 9, 10, 0.12);
  --shadow-dock: 0 6px 16px rgba(8, 9, 10, 0.07), 0 28px 72px rgba(8, 9, 10, 0.14);
  --shadow-accent: 0 8px 32px var(--c-accent-glow);

  /* ---------- Blur ---------- */
  --blur-nav: 18px;
  --blur-glass: 24px;

  /* ---------- Motion ---------- */
  --motion-fast:   160ms;
  --motion-normal: 260ms;
  --motion-slow:   420ms;
  --motion-page:   600ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ---------- Z-index ---------- */
  --z-base:   1;
  --z-raised: 10;
  --z-dock:   40;
  --z-header: 50;
  --z-sheet:  60;
  --z-modal:  70;
}