/* MECO design tokens — audit §3.1 / §4.1 / §5.1 / §6.1.
   4pt spacing scale, 1.333 type scale, 4 breakpoints, semantic color aliases.
   Loaded site-wide via <link rel="stylesheet" href="/assets/css/tokens.css">. */

@layer reset, tokens, base, components, page, state, overrides;

@layer tokens {
  :root {
    /* 4pt spacing scale */
    --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;
    /* Semantic spacing aliases */
    --space-input-x: var(--space-4);
    --space-input-y: var(--space-3);
    --space-stack-tight: var(--space-2);
    --space-stack-default: var(--space-4);
    --space-stack-section: var(--space-16);
    --space-inline-icon: var(--space-2);
    /* Type scale (1.333 perfect-fourth ratio) */
    --text-xs:   12px;
    --text-sm:   16px;
    --text-base: 21px;
    --text-lg:   28px;
    --text-xl:   37px;
    --text-2xl:  50px;
    --text-3xl:  66px;
    --text-4xl:  88px;
    --text-5xl:  117px;
    /* Breakpoints (note: CSS spec doesn't permit var() inside @media — these
       tokens are for use in width/max-width properties. @media queries use
       raw 480/768/1024/1280 px values matching these tokens.) */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
  }
}

@layer tokens {
  :root {
    /* Semantic color aliases — fallback chain so the same alias works on
       every page regardless of which palette (--h-*, --*, or hardcoded)
       the page defines. Resolution order: --h-* (homepage style), --*
       (dna-style), then hardcoded final fallback. */
    --color-bg:            var(--h-bg, var(--bg, #f5f5f0));
    --color-text:          var(--h-text, var(--text, #d6c97a));
    --color-text-muted:    rgba(214,201,122,0.65);
    --color-link:          var(--h-amber, var(--amber, #eddb80));
    --color-link-hover:    var(--h-lime, var(--lime, #a1ae1c));
    --color-border:        rgba(214,201,122,0.18);
    --color-border-focus:  var(--h-amber, var(--amber, #eddb80));
    --color-surface:       rgba(20,20,20,0.92);
    --color-success:       #9ecf6e;
    --color-error:         #f08080;
  }
}