/* WorkAdept Portal design tokens — "Workbench" look, electric cobalt anchor (hue 250–258).
 * Ported from the old app's light-only token sheet per the modern-css skill: semantic color
 * tokens (light scheme only — dark theme deliberately removed), fluid clamp() type/space scales,
 * everything in the `tokens` cascade layer.
 *
 * This sheet is linked FIRST, so the layer-order declaration below is the single source of truth
 * for the whole cascade; base.css and app.css only add rules into layers declared here.
 */
@layer reset, tokens, base, components, utilities;

@layer tokens {
  :root {
    color-scheme: light;

    /* -- Surfaces & ink -------------------------------------------------------------------- */
    --color-paper:       oklch(98.5% 0.004 250);
    --color-paper-2:     oklch(96.7% 0.008 250);
    --color-paper-3:     oklch(93.8% 0.014 250);
    --color-surface:     oklch(100% 0.002 250);
    --color-ink:         oklch(24% 0.02 258);
    --color-ink-2:       oklch(34% 0.018 257);
    --color-muted:       oklch(48% 0.017 257);
    --color-rule:        oklch(86% 0.014 250);
    --color-rule-strong: oklch(70% 0.026 252);

    /* -- Electric cobalt accent ------------------------------------------------------------ */
    --color-accent:        oklch(50% 0.2 256);
    --color-accent-strong: oklch(42% 0.19 256);
    --color-accent-ink:    oklch(99% 0.002 250);
    --color-focus:         oklch(43% 0.22 256);

    /* Cobalt-tinted highlight surface (selected/caution wash). */
    --color-caution:     oklch(95% 0.03 250);
    --color-caution-ink: oklch(29% 0.05 256);

    /* Status hues: 158 green, 76 amber, 28 red. */
    --color-success: oklch(42% 0.11 158);
    --color-warning: oklch(53% 0.14 76);
    --color-error:   oklch(52% 0.19 28);

    /* -- Typography ------------------------------------------------------------------------------
     * Local-first stacks (CSP is self-only; no remote fonts). The named faces apply where
     * installed, the system fallbacks carry the same grotesque/mono voice everywhere else.
     */
    --font-display: "Space Grotesk", "Aptos Display", "Segoe UI", system-ui, sans-serif;
    --font-body: "IBM Plex Sans", "Aptos", "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, monospace;

    /* Fluid type scale — min at handset width, max on the desktop workbench, no breakpoints. */
    --text-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
    --text-sm: clamp(0.84rem, 0.82rem + 0.12vw, 0.92rem);
    --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
    --text-lg: clamp(1.1rem, 1.04rem + 0.3vw, 1.28rem);
    --text-xl: clamp(1.22rem, 1.12rem + 0.5vw, 1.5rem);
    --text-2xl: clamp(1.45rem, 1.3rem + 0.75vw, 1.9rem);
    --text-3xl: clamp(1.9rem, 1.5rem + 2vw, 2.75rem);

    /* Fluid space scale — the Workbench rhythm: tight hairline gaps, generous pane padding. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: clamp(0.7rem, 0.65rem + 0.25vw, 0.85rem);
    --space-4: clamp(0.9rem, 0.8rem + 0.5vw, 1.15rem);
    --space-5: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
    --space-6: clamp(1.3rem, 1.15rem + 0.8vw, 1.85rem);
    --space-8: clamp(1.7rem, 1.4rem + 1.2vw, 2.5rem);
    --space-10: clamp(2.1rem, 1.7rem + 1.6vw, 3.2rem);
    --space-12: clamp(2.5rem, 2rem + 2vw, 4rem);

    /* Shape, rules, motion. */
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --rule: 1px solid var(--color-rule);
    --rule-strong: 1px solid var(--color-rule-strong);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 120ms;
    --dur-base: 180ms;

    /* Focus ring (consumed by base.css :focus-visible); widened under prefers-contrast. */
    --focus-ring-width: 2px;
  }

  /* Higher-contrast preference: harden the hairlines, lift muted ink toward body ink, and
   * thicken the focus ring — token-level only, so every component inherits it for free. */
  @media (prefers-contrast: more) {
    :root {
      --color-rule: oklch(58% 0.03 252);
      --color-rule-strong: oklch(44% 0.05 253);
      --color-muted: oklch(36% 0.02 257);
      --focus-ring-width: 3px;
    }
  }
}