/* Abs' Labs — Desert Stone tokens
 * Canonical source of truth for colour, type, spacing, motion, surfaces. */

:root {
  /* ============ COLOR — Desert Stone (dark-first) ============ */

  /* Canvas */
  --color-bg:              #0A0A0A;  /* PRIMARY SURFACE — obsidian */
  --color-surface:         #111110;  /* CARD — one step up from bg */
  --color-surface-2:       #1A1917;  /* elevated card / modal */
  --color-border:          rgba(184, 178, 166, 0.12);
  --color-border-strong:   rgba(184, 178, 166, 0.24);

  /* Text */
  --color-text:            #F0EBE0;  /* PRIMARY TEXT — warm bone */
  --color-text-dim:        rgba(240, 235, 224, 0.72);
  --color-text-muted:      rgba(240, 235, 224, 0.40);

  /* Accent — Ash (industrial calm). The ONLY brand accent. */
  --color-accent:          #B8B2A6;
  --color-accent-glow:     rgba(184, 178, 166, 0.40);
  --color-accent-dim:      rgba(184, 178, 166, 0.60);

  /* Semantic — use sparingly */
  --color-success:         #5CB77A;
  --color-warning:         #D4A84B;
  --color-danger:          #D4634B;
  --color-info:            #5B8DEF;

  /* Hero dot field */
  --dot-color:             #F0EBE0;
  --dot-opacity-near:      0.8;
  --dot-opacity-mid:       0.4;
  --dot-opacity-far:       0.15;
  --dot-size-near:         2.5px;
  --dot-size-mid:          1.5px;
  --dot-size-far:          1px;

  /* ============ TYPOGRAPHY ============ */
  --font-display:          'Fraunces', 'EB Garamond', Georgia, serif;
  --font-body:             'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:             'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-meta:             clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  --text-small:            clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --text-body:             clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lead:             clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-h3:               clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-h2:               clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-h1:               clamp(2.75rem, 2rem + 3.5vw, 4.5rem);
  --text-display:          clamp(3.5rem, 2rem + 6vw, 7rem);

  --leading-tight:         1.1;
  --leading-normal:        1.5;
  --leading-loose:         1.7;

  --tracking-tight:        -0.02em;
  --tracking-normal:       0;
  --tracking-wide:         0.08em;
  --tracking-meta:         0.12em;

  --weight-regular:        400;
  --weight-medium:         500;
  --weight-semibold:       600;

  --fraunces-soft:         50;
  --fraunces-wonk:         1;

  /* ============ SPACING ============ */
  --space-1:               0.25rem;
  --space-2:               0.5rem;
  --space-3:               0.75rem;
  --space-4:               1rem;
  --space-6:               1.5rem;
  --space-8:               2rem;
  --space-12:              3rem;
  --space-16:              4rem;
  --space-24:              6rem;
  --space-section:         clamp(5rem, 3rem + 8vw, 10rem);
  --space-hero-vpad:       clamp(6rem, 4rem + 10vw, 14rem);

  --measure-narrow:        34rem;
  --measure-default:       42rem;
  --measure-wide:          64rem;

  /* ============ RADIUS ============ */
  --radius-xs:             2px;
  --radius-sm:             4px;
  --radius-md:             8px;
  --radius-lg:             16px;
  --radius-full:           9999px;

  /* ============ SHADOWS & GLOWS ============ */
  --shadow-1:              0 1px 2px rgba(0,0,0,0.4);
  --shadow-2:              0 4px 16px rgba(0,0,0,0.5);
  --shadow-3:              0 12px 40px rgba(0,0,0,0.6);

  --glow-mark:             0 0 8px rgba(240,235,224,0.9),
                           0 0 24px rgba(184,178,166,0.6),
                           0 0 60px rgba(184,178,166,0.3);

  /* ============ MOTION ============ */
  --dur-instant:           80ms;
  --dur-fast:              160ms;
  --dur-normal:            320ms;
  --dur-slow:              640ms;
  --dur-hero:              2500ms;

  --ease-standard:         cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo:          cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout-quart:      cubic-bezier(0.76, 0, 0.24, 1);

  /* Z */
  --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-overlay: 1000; --z-modal: 10000;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; --dur-fast: 0ms; --dur-normal: 0ms;
    --dur-slow: 0ms; --dur-hero: 0ms;
  }
}