/* ============================================================
   INN8 TEC DESIGN LAB — TOKENS (single source of truth)
   Derived from the brand charcoal #343A40 — the colour of the "8".
   Raw hex values are allowed in THIS FILE ONLY.
   Light theme = :root. Dark theme = [data-theme="dark"].
   ============================================================ */

:root {
  /* ---- Primitive ramp (charcoal, hue of the "8") ---- */
  --gray-25:  #F8F9FA;  /* brand background (locked Apr 2026) */
  --gray-50:  #F1F3F4;
  --gray-100: #E3E6E9;  /* brand border (locked) */
  --gray-200: #C9CDD2;
  --gray-300: #9AA0A6;
  --gray-400: #7A8087;
  --gray-500: #5B6168;  /* brand muted (locked) */
  --gray-600: #474D54;
  --gray-700: #343A40;  /* THE "8" — hero colour of the system */
  --gray-800: #22262A;
  --gray-850: #16181B;
  --gray-900: #111315;  /* brand ink (locked) */
  --gray-950: #0B0C0D;
  --white:    #FFFFFF;

  /* ---- Semantic layer (components may ONLY use these) ---- */
  --bg:              var(--gray-25);
  --surface:         var(--white);
  --surface-2:       var(--gray-50);
  --ink:             var(--gray-900);
  --muted:           var(--gray-500);
  --border:          var(--gray-100);
  --border-strong:   var(--gray-200);
  --accent:          var(--gray-900);
  --accent-contrast: var(--white);
  --ring:            var(--gray-700);
  --eight:           var(--gray-700);
  --eight-opacity:   0.045;

  /* ---- Space (4px base — every margin/padding a multiple) ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  /* ---- Radius (engineered: small and consistent) ---- */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
  --radius-lg: 20px; --radius-full: 999px;

  /* ---- Shadow (layered, soft, low-opacity) ---- */
  --shadow-sm: 0 1px 2px rgba(17, 19, 21, 0.05);
  --shadow-md: 0 2px 8px rgba(17, 19, 21, 0.06), 0 1px 2px rgba(17, 19, 21, 0.04);
  --shadow-lg: 0 12px 32px rgba(17, 19, 21, 0.10), 0 2px 8px rgba(17, 19, 21, 0.05);

  /* ---- Motion (150–300ms UI, transform+opacity only) ---- */
  --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Layout ---- */
  --container: 1200px;
  --measure: 68ch;

  /* ---- Z scale ---- */
  --z-eight: 0; --z-content: 1; --z-nav: 100; --z-overlay: 1000;
}

[data-theme="dark"] {
  --bg:              var(--gray-950);
  --surface:         var(--gray-850);
  --surface-2:       var(--gray-800);
  --ink:             #F2F3F4;
  --muted:           var(--gray-300);
  --border:          var(--gray-800);
  --border-strong:   var(--gray-700);
  --accent:          #F2F3F4;
  --accent-contrast: var(--gray-950);
  --ring:            var(--gray-300);
  --eight:           var(--gray-500);   /* #343A40 vanishes on near-black */
  --eight-opacity:   0.07;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   RETIRED — Apr 2026 monochrome refresh (Decision #1).
   Gold made Inn8 Tec read as a digital-marketing agency.
   Kept ONLY as a quarantined, unreferenced token. If ever
   revived: dark backgrounds only (≈9:1 on #0B0C0D) — it FAILS
   AA as text on light (≈2.2:1 on #F8F9FA). Do not use.
   ============================================================ */
:root { --accent-signal: #FCA311; }