/* ============================================================================
 * unikode/uos · colors_and_type.css
 * Canonical foundation tokens for the unikode design system.
 *
 * Source of truth: kodebase-01/uos/design/src/styles/{tokens,md3,typography}.css
 * Authoritative full token set: ./reference/uos-tokens.css
 *
 * This file is the LIGHT-WEIGHT entrypoint for design artifacts in this skill —
 * slides, prototypes, throwaway HTML. For production code, import the package
 * `@unikode/design/styles` instead.
 *
 * Rules:
 *   - Use semantic tokens (`--uk-color-fg-primary`) over raw values.
 *   - Headings 300, body 400, emphasis & anchors 600.
 *   - Plus Jakarta Sans for UI; JetBrains Mono only for metadata, IDs,
 *     metrics, dates, code-adjacent labels.
 *   - Uniform 3px corner radius (`--uk-radius-control`) unless truly circular.
 *   - Blue is a restrained accent. Never a hero color.
 * ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");

:root {
  /* ─── Family ──────────────────────────────────────────────────────────── */
  --uk-font-family-sans:
    "Plus Jakarta Sans", "Plus Jakarta Sans Variable",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  --uk-font-family-mono:
    "JetBrains Mono", "JetBrains Mono Variable",
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ─── Weight ──────────────────────────────────────────────────────────── */
  --uk-font-weight-light:    300;
  --uk-font-weight-regular:  400;
  --uk-font-weight-medium:   500;
  --uk-font-weight-semibold: 600;

  /* ─── Type scale (MD3-aligned · in px) ───────────────────────────────── */
  --uk-type-display-large:   57px;  /* line 1.12 / 300 */
  --uk-type-display-medium:  45px;  /* line 1.15 / 300 */
  --uk-type-display-small:   36px;  /* line 1.18 / 300 */
  --uk-type-headline-large:  32px;  /* line 1.20 / 300 */
  --uk-type-headline-medium: 28px;  /* line 1.22 / 300 */
  --uk-type-headline-small:  24px;  /* line 1.25 / 400 */
  --uk-type-title-large:     22px;  /* line 1.30 / 500 */
  --uk-type-title-medium:    16px;  /* line 1.50 / 500 */
  --uk-type-title-small:     14px;  /* line 1.45 / 500 */
  --uk-type-body-large:      16px;  /* line 1.60 / 400 */
  --uk-type-body-medium:     14px;  /* line 1.50 / 400 */
  --uk-type-body-small:      12px;  /* line 1.45 / 400 */
  --uk-type-label-large:     14px;  /* line 1.42 / 500 / tracking 0.02 */
  --uk-type-label-medium:    12px;  /* line 1.35 / 500 / tracking 0.08 */
  --uk-type-label-small:     11px;  /* line 1.35 / 500 / tracking 0.12 */

  --uk-line-height-tight:  1.12;
  --uk-line-height-snug:   1.20;
  --uk-line-height-normal: 1.50;
  --uk-line-height-loose:  1.65;

  --uk-letter-spacing-normal:  0;
  --uk-letter-spacing-label:   0.08em;
  --uk-letter-spacing-wide:    0.12em;
  --uk-letter-spacing-eyebrow: 0.18em;

  /* ─── Reference color ramps ──────────────────────────────────────────── */
  --uk-color-white:          #ffffff;
  --uk-color-bone:           #fafafa;     /* canonical app background */
  --uk-color-black:          #000000;

  --uk-color-neutral-50:     #f9fafb;
  --uk-color-neutral-60:     #f5f5f5;
  --uk-color-neutral-75:     #f4f4f4;
  --uk-color-neutral-100:    #f0f0f0;
  --uk-color-neutral-150:    #eeeeee;
  --uk-color-neutral-200:    #ebebeb;
  --uk-color-neutral-250:    #e8e8e8;
  --uk-color-neutral-300:    #e0e0e0;
  --uk-color-neutral-500:    #9ca3af;

  --uk-color-charcoal-550:   #4a4a4a;
  --uk-color-charcoal-600:   #6b6b6b;
  --uk-color-charcoal-650:   #424242;
  --uk-color-charcoal-700:   #383838;
  --uk-color-charcoal-725:   #303030;
  --uk-color-charcoal-775:   #252525;
  --uk-color-charcoal-800:   #2a2a2a;     /* canonical "matte black" */
  --uk-color-charcoal-825:   #222222;
  --uk-color-charcoal-850:   #1f2937;
  --uk-color-charcoal-900:   #1a1a1a;     /* full ink */
  --uk-color-charcoal-950:   #0f0f0f;

  /* The single approved accent. Restrained — selection, focus, anchors. */
  --uk-color-blue-accent:    #007ACC;
  --uk-color-blue-light:     #5dade2;
  --uk-color-blue-dark:      #003d5c;
  --uk-color-blue-container: #e0f0fa;
  --uk-color-blue-on-container: #003050;

  /* Status — used sparingly, never as decorative theming. */
  --uk-color-success:        #16a34a;
  --uk-color-success-dark:   #4ade80;
  --uk-color-warning:        #d97706;
  --uk-color-warning-dark:   #fbbf24;
  --uk-color-error:          #dc2626;
  --uk-color-error-dark:     #f87171;
  --uk-color-purple:         #7c3aed;     /* "intelligent execution" indicator only */

  /* ─── Semantic surface + foreground (light theme default) ────────────── */
  --uk-color-bg-page:        var(--uk-color-bone);
  --uk-color-bg-surface:     var(--uk-color-white);
  --uk-color-bg-surface-muted: var(--uk-color-neutral-75);
  --uk-color-bg-elevated:    var(--uk-color-white);
  --uk-color-bg-inverse:     var(--uk-color-charcoal-850);

  --uk-color-fg-primary:     var(--uk-color-charcoal-900);
  --uk-color-fg-secondary:   var(--uk-color-charcoal-600);
  --uk-color-fg-muted:       var(--uk-color-neutral-500);
  --uk-color-fg-accent:      var(--uk-color-blue-accent);
  --uk-color-fg-on-inverse:  var(--uk-color-neutral-50);
  --uk-color-fg-on-primary:  var(--uk-color-bone);

  --uk-color-border-subtle:  var(--uk-color-neutral-200);
  --uk-color-border-default: var(--uk-color-neutral-300);
  --uk-color-focus-ring:     var(--uk-color-blue-accent);

  /* ─── Status fg (state-cue palette) ──────────────────────────────────── */
  --uk-state-idle-fg:       var(--uk-color-fg-secondary);
  --uk-state-active-fg:     var(--uk-color-blue-accent);
  --uk-state-pending-fg:    var(--uk-color-warning);
  --uk-state-processing-fg: var(--uk-color-blue-accent);
  --uk-state-success-fg:    var(--uk-color-success);
  --uk-state-danger-fg:     var(--uk-color-error);
  --uk-state-blocked-fg:    var(--uk-color-error);
  --uk-state-disabled-fg:   var(--uk-color-fg-muted);

  /* ─── Spacing — 8dp primary, 4dp secondary ───────────────────────────── */
  --uk-space-0:  0;
  --uk-space-2:  2px;
  --uk-space-4:  4px;
  --uk-space-6:  6px;
  --uk-space-8:  8px;
  --uk-space-12: 12px;
  --uk-space-16: 16px;
  --uk-space-20: 20px;
  --uk-space-24: 24px;
  --uk-space-32: 32px;
  --uk-space-40: 40px;
  --uk-space-48: 48px;
  --uk-space-56: 56px;
  --uk-space-64: 64px;
  --uk-space-80: 80px;
  --uk-space-96: 96px;

  /* ─── Radius — uniform 3px ───────────────────────────────────────────── */
  --uk-radius-none:     0;
  --uk-radius-control:  3px;
  --uk-radius-card:     3px;
  --uk-radius-overlay:  3px;
  --uk-radius-circular: 999px;   /* avatars, status dots — not pills */

  /* ─── Elevation — low and restrained ─────────────────────────────────── */
  --uk-elevation-0: none;
  --uk-elevation-1: 0 1px 2px rgb(26 26 26 / 0.04);
  --uk-elevation-2: 0 12px 32px rgb(26 26 26 / 0.06);
  --uk-elevation-3: 0 24px 56px rgb(26 26 26 / 0.08);

  /* ─── Motion — calm, premium, token-driven ───────────────────────────── */
  --uk-duration-instant: 0ms;
  --uk-duration-micro:   120ms;
  --uk-duration-short:   180ms;
  --uk-duration-medium:  360ms;
  --uk-duration-long:    560ms;

  --uk-easing-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --uk-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --uk-easing-emphasized: cubic-bezier(0.16, 1, 0.3, 1);

  /* ─── A11y / interaction ─────────────────────────────────────────────── */
  --uk-a11y-target-min:  48px;     /* WCAG / MD3 minimum */
  --uk-a11y-target-comfortable: 56px;
  --uk-a11y-focus-width:  2px;
  --uk-a11y-focus-offset: 2px;
  --uk-readable-measure:  72ch;

  /* ─── Window-size class breakpoints (MD3) ────────────────────────────── */
  --uk-bp-compact-max:  599px;
  --uk-bp-medium-min:   600px;
  --uk-bp-expanded-min: 840px;
  --uk-bp-large-min:    1200px;
  --uk-bp-extra-large:  1600px;
}

/* ─── Dark theme — opt-in via [data-uk-theme="dark"] ───────────────────── */
:root[data-uk-theme="dark"],
.uk-theme-dark {
  --uk-color-bg-page:        var(--uk-color-charcoal-800);
  --uk-color-bg-surface:     var(--uk-color-charcoal-825);
  --uk-color-bg-surface-muted: var(--uk-color-charcoal-725);
  --uk-color-bg-elevated:    var(--uk-color-charcoal-775);

  --uk-color-fg-primary:     var(--uk-color-neutral-200);
  --uk-color-fg-secondary:   var(--uk-color-neutral-500);
  --uk-color-fg-muted:       var(--uk-color-charcoal-600);
  --uk-color-fg-on-primary:  var(--uk-color-charcoal-800);
  --uk-color-fg-accent:      var(--uk-color-blue-light);

  --uk-color-border-subtle:  var(--uk-color-charcoal-700);
  --uk-color-border-default: var(--uk-color-charcoal-650);

  --uk-state-success-fg:    var(--uk-color-success-dark);
  --uk-state-pending-fg:    var(--uk-color-warning-dark);
  --uk-state-danger-fg:     var(--uk-color-error-dark);
  --uk-state-active-fg:     var(--uk-color-blue-light);
  --uk-state-processing-fg: var(--uk-color-blue-light);

  --uk-elevation-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --uk-elevation-2: 0 12px 32px rgb(0 0 0 / 0.5);
  --uk-elevation-3: 0 24px 56px rgb(0 0 0 / 0.6);
}

/* =============================================================================
 * Semantic roles — opinionated, terse class set for direct authoring.
 * Production code uses @unikode/design components; these are for skill output.
 * ========================================================================== */

html, body { background: var(--uk-color-bg-page); color: var(--uk-color-fg-primary); }
html { font-family: var(--uk-font-family-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.u-display     { font-size: var(--uk-type-display-large);   line-height: var(--uk-line-height-tight); font-weight: var(--uk-font-weight-light); letter-spacing: -0.01em; }
.u-display-md  { font-size: var(--uk-type-display-medium);  line-height: var(--uk-line-height-snug);  font-weight: var(--uk-font-weight-light); letter-spacing: -0.01em; }
.u-display-sm  { font-size: var(--uk-type-display-small);   line-height: var(--uk-line-height-snug);  font-weight: var(--uk-font-weight-light); }
.u-headline    { font-size: var(--uk-type-headline-large);  line-height: var(--uk-line-height-snug);  font-weight: var(--uk-font-weight-light); }
.u-headline-md { font-size: var(--uk-type-headline-medium); line-height: var(--uk-line-height-snug);  font-weight: var(--uk-font-weight-light); }
.u-headline-sm { font-size: var(--uk-type-headline-small);  line-height: var(--uk-line-height-snug);  font-weight: var(--uk-font-weight-regular); }
.u-title       { font-size: var(--uk-type-title-large);     line-height: var(--uk-line-height-snug);  font-weight: var(--uk-font-weight-medium); }
.u-title-md    { font-size: var(--uk-type-title-medium);    line-height: var(--uk-line-height-normal);font-weight: var(--uk-font-weight-medium); }
.u-title-sm    { font-size: var(--uk-type-title-small);     line-height: var(--uk-line-height-normal);font-weight: var(--uk-font-weight-medium); }
.u-body        { font-size: var(--uk-type-body-medium);     line-height: var(--uk-line-height-normal);font-weight: var(--uk-font-weight-regular); }
.u-body-lg     { font-size: var(--uk-type-body-large);      line-height: var(--uk-line-height-loose); font-weight: var(--uk-font-weight-regular); }
.u-body-sm     { font-size: var(--uk-type-body-small);      line-height: var(--uk-line-height-normal);font-weight: var(--uk-font-weight-regular); }
.u-label       { font-size: var(--uk-type-label-medium);    line-height: var(--uk-line-height-snug);  font-weight: var(--uk-font-weight-medium); letter-spacing: var(--uk-letter-spacing-label); text-transform: uppercase; color: var(--uk-color-fg-muted); }
.u-eyebrow     { font-size: var(--uk-type-label-small);     line-height: var(--uk-line-height-snug);  font-weight: var(--uk-font-weight-medium); letter-spacing: var(--uk-letter-spacing-eyebrow); text-transform: uppercase; color: var(--uk-color-fg-muted); }
.u-mono        { font-family: var(--uk-font-family-mono); font-feature-settings: "tnum" 1, "calt" 0; }
.u-muted       { color: var(--uk-color-fg-muted); }
.u-secondary   { color: var(--uk-color-fg-secondary); }

a, .u-link {
  color: var(--uk-color-fg-accent);
  font-weight: var(--uk-font-weight-semibold);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: var(--uk-a11y-focus-width) solid var(--uk-color-focus-ring);
  outline-offset: var(--uk-a11y-focus-offset);
  border-radius: var(--uk-radius-control);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}