/* lowest → highest priority */
@layer reset, base, utilities, site, components, theme;

/* Role tokens (semantic) & spacing scale — no hard selectors */
@layer theme {
  :root {
    /* Palette (literal values — override in sub-site colors.css) */
    --palette-brand:       oklch(0.64 0.20 257);
    --palette-brand-hi:    oklch(0.74 0.16 257);
    --palette-theme:       oklch(0.78 0.14 35);
    --palette-theme-hi:    oklch(0.85 0.10 35);
    --palette-ink:         oklch(0.14 0.03 265);
    --palette-ink-weak:    oklch(0.48 0.02 265);
    --palette-bg:          oklch(0.99 0 0);
    --palette-panel:       oklch(0.98 0 0);
    --palette-rule:        oklch(0.86 0.02 265);
    --palette-accent:      oklch(0.68 0.16 250);
    --palette-accent-2:    oklch(0.75 0.18 150);
    --palette-on-accent:   #fff;

    /* Roles (used by components) */
    --color-bg:        var(--palette-bg);
    --color-panel:     var(--palette-panel);
    --color-ink:       var(--palette-ink);
    --color-ink-weak:  var(--palette-ink-weak);
    --color-rule:      var(--palette-rule);
    --color-accent:    var(--palette-accent);
    --color-accent-2:  var(--palette-accent-2);
    --color-on-accent: var(--palette-on-accent);

    --link:        var(--color-accent);
    --link-hover:  color-mix(in oklab, var(--color-accent), black 12%);

    /* Borders, radii, shadows */
    --hairline: 1px solid var(--color-rule);
    --radius-2: 10px;
    --radius-3: 14px;
    --radius-4: 22px;

    /* Spacing scale */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: 1rem;
    --space-4: 2rem;
    
/*     font weights */
  }
}