/* Semantic token contract.
   Components must read only from this layer, never from primitives.
   Hosts override these bindings in their own brand.css. */

@layer tokens {
    :root {
        /* Ink (text) */
        --color-ink: var(--op-neutral-950); /* primary body text + h4/h5/h6 */
        --color-ink-h1: var(--op-neutral-900); /* primary headings — softened from --color-ink for less-stark feel on dense pages */
        --color-ink-h2: var(--op-neutral-800); /* secondary headings */
        --color-ink-h3: var(--op-neutral-700); /* tertiary headings — shares value with --color-ink-soft */
        --color-ink-soft: var(--op-neutral-700); /* secondary text */
        --color-ink-mute: var(--op-neutral-500); /* captions, labels, metadata */
        /* Surfaces */
        --color-surface: var(--op-neutral-50); /* default page background */
        --color-surface-alt: var(--op-neutral-100); /* secondary / alt background */
        --color-line: var(--op-neutral-200); /* hairline borders */
        /* Accent */
        --color-accent: var(--op-neutral-900); /* neutral default; hosts override */
        --color-accent-deep: var(--op-neutral-950);
        --color-accent-soft: var(--op-neutral-300);
        /* Warn — "please confirm" / flagged / soft-caution treatments.
           Distinct from error (something went wrong). */
        --color-warn:      var(--op-amber-500); /* primary: borders, icons, callout edge */
        --color-warn-deep: var(--op-amber-700); /* text emphasis on warn */
        --color-warn-soft: var(--op-amber-100); /* light backgrounds for warn callouts */
        --color-warn-glow: color-mix(in srgb, var(--op-amber-700) 15%, transparent); /* translucent halo for focus/outline glow */
        /* Error — "something went wrong" / submission failed / destructive.
           Stronger than warn; commands attention. */
        --color-error:      var(--op-red-500);  /* primary: borders, icons, callout edge */
        --color-error-deep: var(--op-red-700);  /* text emphasis on error */
        --color-error-soft: var(--op-red-50);   /* light backgrounds for error callouts */
        --color-error-glow: color-mix(in srgb, var(--op-red-700) 15%, transparent); /* translucent halo for focus/outline glow */
        /* Info — "heads up" / pre-fill confirmation / state notice.
           Neutral attention, not an error or warning. */
        --color-info:      var(--op-blue-500); /* primary: borders, icons, callout edge */
        --color-info-deep: var(--op-blue-700); /* text emphasis on info */
        --color-info-soft: var(--op-blue-50);  /* light backgrounds for info callouts */
        --color-info-glow: color-mix(in srgb, var(--op-blue-700) 15%, transparent); /* translucent halo for focus/outline glow */
        /* Shadow colors — translucent ink for elevation. Stacked at varying
           opacities to compose layered drop shadows that read on light or
           warm-paper surfaces. Hosts that rebind --color-ink get matching
           shadow tinting for free. */
        --color-shadow-soft: color-mix(in srgb, var(--color-ink)  5%, transparent);
        --color-shadow-mid:  color-mix(in srgb, var(--color-ink)  8%, transparent);
        --color-shadow-deep: color-mix(in srgb, var(--color-ink) 12%, transparent);
        /* Dark-surface inversion */
        --color-on-dark: var(--op-neutral-50);
        --color-on-dark-mute: rgb(250 250 250 / .65);

        /* Inverse-surface tokens — bind DIRECTLY to primitives so the
           [data-surface="dark"] inversion rule cannot remap them. Use these
           when a component needs a stable "dark surface" or "light text on
           dark" color even inside an inverted scope. */
        --color-surface-inverse:    var(--op-neutral-950);
        --color-on-surface-inverse: var(--op-neutral-50);
        /* Type roles */
        --font-display: var(--op-font-sans);
        --font-body: var(--op-font-sans);
        --font-mono: var(--op-font-mono);
        /* Measure (reading width) */
        --measure-narrow: 14ch;
        --measure-body: 60ch;
        /* Page-level content cap. Drives .u-contained (centered column
           utility) and any component that wants to match the marketing-
           style constrained canvas. Hosts can override in their brand
           layer if a product wants a tighter or wider canvas. */
        --max-content-width: 80rem;
    }
}