/* ============================================================================
   House tokens. Every brand inherits this file unchanged.

   A brand theme may override ONLY: the palette hues, the typeface stack, and
   the radius tier. Never the spacing scale, the grid, or the motion timing —
   those three are what make five different-looking sites read as siblings.

   Derived from measurements of shipped CSS on apple.com, samsung.com,
   teenage.engineering, nothing.tech, bang-olufsen.com, leica-camera.com,
   hay.com and kinto-europe.com. See design/research/house-standard.md.
   ========================================================================= */

@layer tokens, base, components, utilities;

@layer tokens {
  :root {
    /* --- spacing -----------------------------------------------------------
       Components use sp-1..sp-6. Layout uses sp-7..sp-11. They never mix.
       If a component wants 96px of padding, the layout is wrong. */
    --sp-0:  0;
    --sp-1:  0.25rem;   /*   4 */
    --sp-2:  0.5rem;    /*   8 */
    --sp-3:  0.75rem;   /*  12 */
    --sp-4:  1rem;      /*  16 */
    --sp-5:  1.5rem;    /*  24 */
    --sp-6:  2rem;      /*  32 */
    --sp-7:  3rem;      /*  48 */
    --sp-8:  4rem;      /*  64 */
    --sp-9:  6rem;      /*  96 */
    --sp-10: 8rem;      /* 128 */
    --sp-11: 12rem;     /* 192 */

    --section-y:       clamp(4rem, 2.35rem + 7.06vw, 8rem);
    --section-y-major: clamp(6rem, 3.06rem + 12.5vw, 12rem);

    /* --- grid ------------------------------------------------------------ */
    --grid-cols: 4;                 /* 4 mobile -> 6 tablet -> 12 desktop */
    --gutter: var(--sp-5);
    --margin: var(--sp-5);
    --max-content: 1200px;
    --max-text: 720px;              /* text column never exceeds this */
    --max-bleed: 1680px;

    /* --- type ------------------------------------------------------------
       Every line-height resolves to a whole pixel; every one >=20px is a
       multiple of 4. Tracking goes monotonically negative as size rises. */
    --t-micro:    0.6875rem;  --lh-micro:    1rem;      --tr-micro:    0.04em;
    --t-caption:  0.75rem;    --lh-caption:  1rem;      --tr-caption: -0.010em;
    --t-sm:       0.875rem;   --lh-sm:       1.25rem;   --tr-sm:      -0.016em;
    --t-body:     1rem;       --lh-body:     1.5rem;    --tr-body:    -0.018em;
    --t-body-lg:  1.125rem;   --lh-body-lg:  1.625rem;  --tr-body-lg: -0.008em;
    --t-h4:       1.25rem;    --lh-h4:       1.75rem;   --tr-h4:      -0.010em;
    --t-h3:       1.625rem;   --lh-h3:       2rem;      --tr-h3:      -0.014em;
    --t-h2:       2.125rem;   --lh-h2:       2.25rem;   --tr-h2:      -0.018em;
    --t-h1:       2.75rem;    --lh-h1:       2.875rem;  --tr-h1:      -0.022em;
    --t-display:  3.5rem;     --lh-display:  3.5rem;    --tr-display: -0.028em;

    --w-regular: 400;
    --w-medium:  500;         /* two weights per brand. Three only if one is display. */

    /* --- motion ----------------------------------------------------------- */
    --dur-1: 100ms;   /* hover, press, focus ring */
    --dur-2: 200ms;   /* state change, small reveal */
    --dur-3: 320ms;   /* card enter, accordion */
    --dur-4: 480ms;   /* overlay, drawer, sticky stage */
    --dur-5: 800ms;   /* hero reveal. Once per page, maximum. */

    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:      cubic-bezier(0.165, 0.84, 0.44, 1);  /* easeOutQuart */
    --ease-in:       cubic-bezier(0.55, 0.06, 0.68, 0.19);

    /* --- radius -----------------------------------------------------------
       A brand picks System A or System B in its theme and never mixes.
       System A (sharp): everything 0, pills for badges only.
       System B (soft):  the tiered set below. Inner radius = outer - padding. */
    --r-0: 0;
    --r-pill: 999px;
  }

  @media (min-width: 768px) {
    :root {
      --grid-cols: 6;
      --margin: var(--sp-7);
      --t-body: 1.0625rem; --lh-body: 1.5625rem;
      --t-body-lg: 1.3125rem; --lh-body-lg: 1.8125rem;
      --t-h4: 1.5rem;    --lh-h4: 1.75rem;
      --t-h3: 2rem;      --lh-h3: 2.25rem;
      --t-h2: 3rem;      --lh-h2: 3.25rem;
      --t-h1: 4.5rem;    --lh-h1: 4.75rem;
      --t-display: 7rem; --lh-display: 7rem;
    }
  }

  @media (min-width: 1024px) {
    :root { --grid-cols: 12; --gutter: var(--sp-6); --margin: var(--sp-8) }
  }

  /* Reduced motion is handled at the TOKEN layer so a component physically
     cannot forget it. All three reference sites fail this. We do not. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-5: 0ms;
    }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}