/* ============================================================================
   ONEEXISTS — Design Tokens
   Every value on the site references one of these. Change a token, change the site.
   Documented in /home/claude/oneexists-redesign/DESIGN-SPEC.md
   ============================================================================ */

:root {
  /* -- Color palette v1.2.0 — Silver-tint cool tech ------------------------
     Cool-shifted from v1.1 warm off-white to precision-lab feel.
     RGB triplets so any token can carry alpha via rgb(var(--x) / .n) */
  --oe-black:         14  14  14;   /* pure text + deepest dark section */
  --oe-graphite:      28  30  33;   /* cooler graphite (was 33 33 35) */
  --oe-charcoal:      52  56  62;   /* cool charcoal */
  --oe-concrete:     108 113 120;   /* cool mid-grey body-muted */
  --oe-silver:       178 184 192;   /* cool silver — the brand accent tone */
  --oe-mist:         210 216 222;   /* cool mist for dividers */
  --oe-fog:          228 232 237;   /* cool hairline */
  --oe-cloud:        234 236 238;   /* cool bg-muted (was 243 243 244) */
  --oe-paper:        240 241 242;   /* SILVER-TINT bg-alt (was warm 249 249 247) */
  --oe-white:        255 255 255;
  --oe-sale:         196  48  48;
  --oe-success:       48 122   7;
  --oe-warn:         204 138  30;

  /* Optional metallic accent — used sparingly on chips + dividers */
  --oe-metallic:     195 200 208;   /* brushed steel tone */

  /* -- Semantic aliases -- */
  --oe-bg:            var(--oe-white);
  --oe-bg-alt:        var(--oe-paper);
  --oe-bg-muted:      var(--oe-cloud);
  --oe-bg-dark:       var(--oe-black);
  --oe-bg-deep:       var(--oe-graphite);
  --oe-text:          var(--oe-black);
  --oe-text-muted:    var(--oe-concrete);
  --oe-text-subtle:   var(--oe-silver);
  --oe-text-inverse:  var(--oe-white);
  --oe-border:        var(--oe-fog);
  --oe-border-strong: var(--oe-mist);
  --oe-border-dark:   var(--oe-black);

  /* -- Typography -- */
  --oe-font-body: "Inter", "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif;
  --oe-font-head: "Inter", "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif;
  --oe-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Consolas, "Liberation Mono", monospace;

  --oe-fs-display: clamp(3rem,   1.9rem + 4.5vw, 6rem);
  --oe-fs-h1:      clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem);
  --oe-fs-h2:      clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem);
  --oe-fs-h3:      clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  --oe-fs-h4:      1.125rem;
  --oe-fs-h5:      1rem;
  --oe-fs-h6:      0.8125rem;

  --oe-fs-body:    1rem;
  --oe-fs-body-lg: 1.125rem;
  --oe-fs-small:   0.875rem;
  --oe-fs-caption: 0.75rem;

  --oe-fs-nav:     0.8125rem;
  --oe-fs-btn:     0.875rem;
  --oe-fs-price:   1.125rem;

  --oe-lh-tight:   1.02;
  --oe-lh-heading: 1.15;
  --oe-lh-body:    1.6;

  --oe-ls-extra-tight: -0.02em;
  --oe-ls-tight:       -0.01em;
  --oe-ls-normal:       0;
  --oe-ls-wide:         0.1em;
  --oe-ls-extra-wide:   0.14em;

  --oe-fw-light:   300;
  --oe-fw-regular: 400;
  --oe-fw-medium:  500;
  --oe-fw-semi:    600;
  --oe-fw-bold:    700;

  /* -- Layout -- */
  --oe-container-xs:  42.5rem;
  --oe-container-sm:  60rem;
  --oe-container-md:  75rem;
  --oe-container-xl:  85rem;
  --oe-container-2xl: 96rem;

  --oe-gutter-mobile:  1.25rem;
  --oe-gutter-tablet:  1.5rem;
  --oe-gutter-desktop: 2rem;
  --oe-gutter: var(--oe-gutter-mobile);

  --oe-section-y-sm: clamp(2.5rem, 4vw, 4rem);
  --oe-section-y:    clamp(4rem,  7vw, 6rem);
  --oe-section-y-lg: clamp(5rem, 10vw, 9rem);

  --oe-gap-xs: 0.5rem;
  --oe-gap-sm: 1rem;
  --oe-gap:    1.5rem;
  --oe-gap-lg: 2.5rem;
  --oe-gap-xl: 4rem;
  --oe-gap-2xl: 6rem;

  /* -- Borders, radii, shadows -- */
  --oe-radius-none: 0;
  --oe-radius-sm:   2px;
  --oe-radius-full: 999px;

  --oe-border-hair:   1px solid rgb(var(--oe-border));
  --oe-border-thin:   1px solid rgb(var(--oe-border-strong));
  --oe-border-strong: 1px solid rgb(var(--oe-black));

  --oe-shadow-none: none;
  --oe-shadow-sm:   0 1px 2px rgb(var(--oe-black) / 0.04);
  --oe-shadow:      0 5px 30px rgb(var(--oe-black) / 0.05);
  --oe-shadow-lg:   0 20px 60px rgb(var(--oe-black) / 0.10);

  /* -- Motion -- */
  --oe-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --oe-ease-out:  cubic-bezier(0, 0, 0.2, 1);
  --oe-ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --oe-duration-fast: 150ms;
  --oe-duration:      280ms;
  --oe-duration-slow: 480ms;
  --oe-duration-editorial: 800ms;

  /* -- Header dimensions -- */
  --oe-announcement-h: 32px;
  --oe-header-h:       80px;
  --oe-header-h-mobile: 60px;

  /* -- Breakpoints (readable in JS via getComputedStyle) -- */
  --oe-bp-sm:  40rem;
  --oe-bp-md:  48rem;
  --oe-bp-lg:  64rem;
  --oe-bp-xl:  80rem;
  --oe-bp-2xl: 96rem;
}

@media (min-width: 48rem)  { :root { --oe-gutter: var(--oe-gutter-tablet); } }
@media (min-width: 80rem)  { :root { --oe-gutter: var(--oe-gutter-desktop); } }

@media (max-width: 47.99rem) {
  :root {
    --oe-header-h: var(--oe-header-h-mobile);
    --oe-announcement-h: 40px;
  }
}

/* Dark editorial mode — activate on collection pages that use `.oe-dark` wrapper
   or when the whole page opts in via <html data-theme="dark">. */
[data-theme="dark"], .oe-dark {
  --oe-bg:            var(--oe-black);
  --oe-bg-alt:        var(--oe-graphite);
  --oe-bg-muted:      var(--oe-charcoal);
  --oe-text:          var(--oe-white);
  --oe-text-muted:    var(--oe-silver);
  --oe-text-subtle:   var(--oe-concrete);
  --oe-border:        var(--oe-charcoal);
  --oe-border-strong: var(--oe-concrete);
}

/* Reduce motion — global. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}