/* Arc foundation for Cairn (piece 4, 2026-10-29).
 *
 * Arc's semantic roles, mapped onto Cairn's existing tokens so every theme
 * (dark, light, steel, custom palettes painted by OcTheme) carries them
 * without new colours. Every Arc-style layer (sidebar_arc, topbar_arc,
 * cards_arc and the element pieces after them) uses only these names.
 *
 * Decisions (md/ARC_MIGRATION_REVIEW_2026-10-29.md §6):
 *   D1 density   compact: controls 28 / 32px, table rows 28px
 *   D2 corners   8px controls, 12px cards, 16px sheets and dialogs, concentric
 *   D3 type      Instrument Sans; 11/12/13/14/16, titles 20/24; weights 400/500
 *   D4 labels    sentence case in secondary ink, no uppercase eyebrows
 *
 * Winning the cascade: the older sheets carry 4,434 !important and long
 * class chains (some score an id through :not(#…)). An Arc layer loads after
 * flat.css and either uses new class names (.oc-btn, .oc-tabs, …) that no old
 * rule targets, or, where it restyles a legacy class, scopes it with
 *   html body:is(body, #oc-arc):is(body, #oc-arc-2) <selector>
 * which scores as two ids. No element carries either id. (Cascade layers
 * would not help: layered rules lose to unlayered ones.)
 */

:root,
html body {
  /* Surfaces */
  --arc-background: var(--bg-base);
  --arc-surface: var(--bg-elevated);
  --arc-surface-muted: var(--bg-elevated-2);
  --arc-surface-raised: var(--bg-elevated);
  /* Text */
  --arc-foreground: var(--text-primary);
  --arc-text-secondary: var(--text-secondary);
  --arc-text-muted: var(--text-muted);
  /* Lines */
  --arc-border: color-mix(in srgb, var(--text-primary) 9%, transparent);
  --arc-border-subtle: color-mix(in srgb, var(--text-primary) 6%, transparent);
  --arc-border-strong: color-mix(in srgb, var(--text-primary) 18%, transparent);
  /* Tints for quiet states */
  --arc-hover: color-mix(in srgb, var(--text-primary) 5%, transparent);
  --arc-press: color-mix(in srgb, var(--text-primary) 9%, transparent);
  --arc-selected: color-mix(in srgb, var(--text-primary) 8.5%, transparent);
  /* Accent, spent with intent */
  --arc-accent: var(--accent);
  --arc-accent-strong: color-mix(in srgb, var(--accent) 82%, var(--text-primary));
  --arc-accent-subtle: color-mix(in srgb, var(--accent) 14%, transparent);
  --arc-accent-foreground: var(--text-inverse, #fff);
  --arc-focus: color-mix(in srgb, var(--accent) 70%, transparent);
  /* Status means status */
  --arc-success: var(--success, var(--positive));
  --arc-warning: var(--warning, var(--warn));
  --arc-danger: var(--danger, var(--negative));
  --arc-success-subtle: color-mix(in srgb, var(--arc-success) 13%, transparent);
  --arc-warning-subtle: color-mix(in srgb, var(--arc-warning) 15%, transparent);
  --arc-danger-subtle: color-mix(in srgb, var(--arc-danger) 13%, transparent);
  /* Selection controls */
  --arc-control-track: color-mix(in srgb, var(--text-primary) 16%, transparent);
  --arc-control-on: var(--accent);
  --arc-control-thumb: var(--bg-elevated);
  --arc-control-glyph: var(--text-inverse, #fff);
  /* Chart series */
  --arc-series-1: var(--accent);
  --arc-series-2: var(--clr-orange, var(--warning));
  --arc-series-3: var(--success, var(--positive));
  --arc-series-4: var(--clr-purple, var(--accent-2));

  /* Shadows: floating layers only (menus, popovers, dialogs, sheets) */
  --arc-shadow-floating: 0 20px 48px rgb(0 0 0 / .42), 0 3px 10px rgb(0 0 0 / .22);
  --arc-shadow-raised: 0 8px 22px rgb(0 0 0 / .22), 0 1px 3px rgb(0 0 0 / .12);

  /* Corners (D2) */
  --arc-radius-control: 8px;
  --arc-radius-button: 18px;     /* uiarc.dev buttons and button groups: a soft pill */
  --arc-radius-chip: 6px;
  --arc-radius-card: 12px;
  --arc-radius-sheet: 16px;
  --arc-radius-pill: 999px;

  /* Sizes (D1) */
  --arc-control-sm: 28px;
  --arc-control-md: 32px;
  --arc-control-touch: 40px;
  --arc-row: 28px;
  --arc-row-comfy: 32px;

  /* Type (D3) — the scale follows the portal's font-scale setting */
  --arc-text-2xs: calc(11px * var(--ui-font-scale, 1));
  --arc-text-xs: calc(12px * var(--ui-font-scale, 1));
  --arc-text-sm: calc(13px * var(--ui-font-scale, 1));
  --arc-text-md: calc(14px * var(--ui-font-scale, 1));
  --arc-text-lg: calc(16px * var(--ui-font-scale, 1));
  --arc-text-title: calc(20px * var(--ui-font-scale, 1));
  --arc-text-display: calc(24px * var(--ui-font-scale, 1));
  --arc-weight: 400;
  --arc-weight-strong: 500;
  --arc-tracking: -0.005em;

  /* Spacing: a 4px grid */
  --arc-space-1: 4px;
  --arc-space-2: 8px;
  --arc-space-3: 12px;
  --arc-space-4: 16px;
  --arc-space-5: 20px;
  --arc-space-6: 24px;
  --arc-space-8: 32px;

  /* Motion: uiarc.dev's motion tokens (registry arc-motion-tokens). Every
     spring is critically damped (bounce 0): nothing overshoots. A critically
     damped spring has one shape at every speed, so one linear() curve,
     sampled from x = 1 - (1 + wt)e^-wt to 99.5%, serves all three; the
     duration sets the speed (Arc's CSS uses 580ms for spring.smooth). */
  --arc-ease: cubic-bezier(.22, 1, .36, 1);          /* standard: colour, opacity */
  --arc-ease-enter: cubic-bezier(.16, 1, .3, 1);
  --arc-ease-exit: cubic-bezier(.7, 0, .84, 0);
  --arc-ease-inout: cubic-bezier(.65, 0, .35, 1);    /* moves of things already on screen */
  --arc-spring-curve: linear(0, 0.0002 0.3%, 0.0019 0.8%, 0.0067 1.6%, 0.0160 2.5%, 0.0310 3.6%, 0.0524 4.8%, 0.0803 6.1%, 0.1147 7.6%, 0.1550 9.2%, 0.2006 10.9%, 0.2503 12.7%, 0.3031 14.6%, 0.3578 16.6%, 0.4133 18.6%, 0.4686 20.8%, 0.5227 23.1%, 0.5748 25.4%, 0.6243 27.9%, 0.6706 30.4%, 0.7135 33.0%, 0.7526 35.7%, 0.7880 38.4%, 0.8196 41.3%, 0.8476 44.2%, 0.8721 47.1%, 0.8935 50.2%, 0.9118 53.3%, 0.9275 56.5%, 0.9407 59.8%, 0.9519 63.1%, 0.9612 66.5%, 0.9688 70.0%, 0.9752 73.5%, 0.9803 77.1%, 0.9845 80.8%, 0.9878 84.5%, 0.9905 88.3%, 0.9927 92.1%, 0.9943 96.0%, 1);
  --arc-spring: var(--arc-spring-curve);              /* morph: shared highlights, width */
  --arc-smooth: var(--arc-spring-curve);              /* panels, drawers, height */
  --arc-snappy: var(--arc-spring-curve);              /* presses, thumbs, small indicators */
  --arc-dur-instant: 120ms;
  --arc-dur-fast: 160ms;
  --arc-dur-exit: 180ms;
  --arc-dur: 240ms;
  --arc-dur-snappy: 380ms;
  --arc-dur-smooth: 580ms;
  --arc-dur-morph: 610ms;
  --arc-dur-considered: 480ms;
}
html[data-theme="light"] body,
[data-theme="light"] {
  --arc-border: color-mix(in srgb, var(--text-primary) 10%, transparent);
  --arc-border-subtle: color-mix(in srgb, var(--text-primary) 6.5%, transparent);
  --arc-border-strong: color-mix(in srgb, var(--text-primary) 22%, transparent);
  --arc-hover: color-mix(in srgb, var(--text-primary) 5%, transparent);
  --arc-shadow-floating: 0 20px 48px rgb(0 0 0 / .105), 0 3px 10px rgb(0 0 0 / .045);
  --arc-shadow-raised: 0 6px 18px rgb(0 0 0 / .065), 0 1px 3px rgb(0 0 0 / .035);
}

/* Numbers that change or align read in tabular figures (piece 17 extends). */
.oc-num, .tabular { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  :root, html body {
    --arc-dur-instant: 0ms; --arc-dur-fast: 0ms; --arc-dur-exit: 0ms;
    --arc-dur: 0ms; --arc-dur-morph: 0ms; --arc-dur-considered: 0ms;
    --arc-dur-snappy: 0ms; --arc-dur-smooth: 0ms;
  }
}