/* rvls v6 shared visual tokens.
   Passive contract: font face plus :root custom properties only.
   Keep this file byte-identical in rvls_netlify_dev/static/css/tokens.css and
   m4-desktop-motion/static/css/tokens.css. Component CSS owns application. */

@font-face {
  font-family: "RVLS Thorn";
  src: url("../fonts/rvls-thorn-temple-os13b-s2.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  /* Palette: night field, bone paper, chrome machinery, oil-slick signal. */
  --rvls-color-night-950: #090710;
  --rvls-color-night-900: #0f0c1a;
  --rvls-color-night-800: #17132a;
  --rvls-color-night-700: #211a39;
  --rvls-color-indigo-600: #372956;
  --rvls-color-indigo-500: #4b396e;
  --rvls-color-lavender-500: #625080;
  --rvls-color-lavender-300: #bbb1c8;
  --rvls-color-lavender-200: #ddd7e6;
  --rvls-color-chrome-700: #4d475b;
  --rvls-color-chrome-500: #c7c4cd;
  --rvls-color-chrome-300: #a7a2b2;
  --rvls-color-chrome-100: #eeeaf5;
  --rvls-color-ink: #17131f;
  --rvls-color-bone: #f1e8d5;
  --rvls-color-bone-muted: #c9bea9;
  --rvls-color-paper-muted: #5c564f;
  --rvls-color-oil-cyan: #5bd7cd;
  --rvls-color-oil-cyan-deep: #126c69;
  --rvls-color-oil-magenta: #ff66bf;
  --rvls-color-oil-magenta-deep: #9c246d;
  --rvls-color-oil-yellow: #e4c66d;
  --rvls-color-fire-white: #fffdf4;
  --rvls-color-fire-violet: #b992ff;
  --rvls-color-success: #75d7a4;
  --rvls-color-warning: #6f5200;
  --rvls-color-danger: #ff7a88;

  /* Semantic colour roles. Pairings are documented in STYLE-SYSTEM.md. */
  --rvls-color-canvas: var(--rvls-color-night-950);
  --rvls-color-field: var(--rvls-color-night-800);
  --rvls-color-field-raised: var(--rvls-color-night-700);
  --rvls-color-text-on-dark: var(--rvls-color-bone);
  --rvls-color-text-muted-on-dark: var(--rvls-color-lavender-300);
  --rvls-color-titlebar-start: var(--rvls-color-indigo-600);
  --rvls-color-titlebar-end: var(--rvls-color-lavender-500);
  --rvls-color-titlebar-text: var(--rvls-color-bone);
  --rvls-color-titlebar-inactive-start: #4f4a61;
  --rvls-color-titlebar-inactive-end: #5b5569;
  --rvls-color-titlebar-inactive-text: var(--rvls-color-lavender-200);
  --rvls-color-chrome: var(--rvls-color-chrome-500);
  --rvls-color-chrome-low: var(--rvls-color-chrome-300);
  --rvls-color-chrome-high: var(--rvls-color-chrome-100);
  --rvls-color-chrome-shadow: var(--rvls-color-chrome-700);
  --rvls-color-chrome-edge: var(--rvls-color-ink);
  --rvls-color-chrome-text: var(--rvls-color-ink);
  --rvls-color-paper: var(--rvls-color-bone);
  --rvls-color-paper-text: var(--rvls-color-ink);
  --rvls-color-paper-muted-text: var(--rvls-color-paper-muted);
  --rvls-color-accent-cyan: var(--rvls-color-oil-cyan);
  --rvls-color-accent-magenta: var(--rvls-color-oil-magenta);
  --rvls-color-accent-yellow: var(--rvls-color-oil-yellow);
  --rvls-color-link-on-dark: var(--rvls-color-oil-magenta);
  --rvls-color-link-on-paper: var(--rvls-color-oil-magenta-deep);
  --rvls-color-focus-on-dark: var(--rvls-color-oil-yellow);
  --rvls-color-focus-on-paper: var(--rvls-color-warning);
  --rvls-color-selection-on-dark: var(--rvls-color-indigo-500);
  --rvls-color-selection-on-paper: #e0cfb4;

  /* Type. Pixel chrome is authored lowercase; never force case in CSS. */
  --rvls-font-interface: "RVLS Thorn", "JetBrains Mono", "Courier New", monospace;
  --rvls-font-reading: "JetBrains Mono", "Courier New", monospace;
  --rvls-font-data: "JetBrains Mono", "Courier New", monospace;
  --rvls-font-weight-regular: 400;
  --rvls-font-weight-bold: 700;
  --rvls-type-size-chrome: 13px;
  --rvls-type-size-meta: 13px;
  --rvls-type-size-body-dense: 15px;
  --rvls-type-size-body: 16px;
  --rvls-type-size-body-large: 19px;
  --rvls-type-size-heading-small: 22px;
  --rvls-type-size-heading: 32px;
  --rvls-type-size-mark: 52px;
  --rvls-type-leading-chrome: 1.15;
  --rvls-type-leading-ui: 1.45;
  --rvls-type-leading-copy: 1.6;
  --rvls-type-tracking: 0;

  /* Compact spacing and square Photon-like geometry. */
  --rvls-space-1: 2px;
  --rvls-space-2: 4px;
  --rvls-space-3: 8px;
  --rvls-space-4: 12px;
  --rvls-space-5: 16px;
  --rvls-space-6: 24px;
  --rvls-space-strip-block: var(--rvls-space-1);
  --rvls-space-strip-inline: var(--rvls-space-3);
  --rvls-space-strip-gap: var(--rvls-space-3);
  --rvls-space-control-inline: var(--rvls-space-3);
  --rvls-space-window-body: var(--rvls-space-4);
  --rvls-radius: 0px;
  --rvls-window-border-width: 1px;
  --rvls-window-padding: 2px;
  --rvls-window-shadow: 2px 2px 0 var(--rvls-color-canvas);
  --rvls-titlebar-height: 26px;
  --rvls-titlebar-gap: var(--rvls-space-2);
  --rvls-titlebar-start-padding: var(--rvls-space-3);
  --rvls-titlebar-end-padding: 1px;
  --rvls-menubar-height: 24px;
  --rvls-toolbar-height: 24px;
  --rvls-control-size: 24px;
  --rvls-taskbar-height: 30px;
  --rvls-icon-size-chrome: 16px;
  --rvls-icon-size-menu: 24px;
  --rvls-icon-size-desktop: 48px;
  --rvls-panel-gap: var(--rvls-space-1);
  --rvls-window-min-width: 280px;
  --rvls-window-min-height: 180px;
  --rvls-touch-target: 44px;

  /* Photon-era chrome. The bevel is exactly one pixel in each direction. */
  --rvls-window-bg: var(--rvls-color-chrome);
  --rvls-window-border: var(--rvls-window-border-width) solid var(--rvls-color-chrome-edge);
  --rvls-titlebar-bg: linear-gradient(
    90deg,
    var(--rvls-color-titlebar-start),
    var(--rvls-color-titlebar-end)
  );
  --rvls-titlebar-bg-inactive: linear-gradient(
    90deg,
    var(--rvls-color-titlebar-inactive-start),
    var(--rvls-color-titlebar-inactive-end)
  );
  --rvls-chrome-strip-bg: var(--rvls-color-chrome);
  --rvls-chrome-strip-low-bg: var(--rvls-color-chrome-low);
  --rvls-chrome-strip-rule: 1px solid var(--rvls-color-chrome-shadow);
  --rvls-bevel-raised:
    inset 1px 1px 0 var(--rvls-color-chrome-high),
    inset -1px -1px 0 var(--rvls-color-chrome-shadow);
  --rvls-bevel-sunken:
    inset 1px 1px 0 var(--rvls-color-chrome-shadow),
    inset -1px -1px 0 var(--rvls-color-chrome-high);
  --rvls-focus-ring-dark: 2px solid var(--rvls-color-focus-on-dark);
  --rvls-focus-ring-paper: 2px solid var(--rvls-color-focus-on-paper);
  --rvls-focus-offset: 2px;

  /* Relief is local to the art surface, never a page-wide text filter. */
  --rvls-relief-light: #e7dcff;
  --rvls-relief-shadow: var(--rvls-color-night-950);
  --rvls-relief-glow: var(--rvls-color-fire-violet);
  --rvls-relief-opacity: 0.22;
  --rvls-art-grain-opacity: 0.08;
  --rvls-art-text-scrim: rgba(9, 7, 16, 0.84);

  /* Motion tokens constrain component behaviour; ANIM owns the scheduler. */
  --rvls-motion-duration-instant: 0ms;
  --rvls-motion-duration-fast: 120ms;
  --rvls-motion-duration-quick: var(--rvls-motion-duration-fast);
  --rvls-motion-duration-base: 180ms;
  --rvls-motion-duration-slow: 320ms;
  --rvls-motion-duration-ceremonial: 720ms;
  --rvls-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --rvls-motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --rvls-motion-distance-small: 4px;
  --rvls-motion-distance: 8px;
  --rvls-motion-intensity: 1;
  --rvls-motion-kick-interval: 333ms;
  --rvls-motion-frame-budget: 2ms;

  /* PRISM bridge aliases. Only the frame and lesson shell consume these. */
  --rvls-prism-ground: var(--rvls-color-field);
  --rvls-prism-paper: var(--rvls-color-paper);
  --rvls-prism-ink: var(--rvls-color-paper-text);
  --rvls-prism-muted-ink: var(--rvls-color-paper-muted-text);
  --rvls-prism-accent-a: var(--rvls-color-accent-cyan);
  --rvls-prism-accent-b: var(--rvls-color-accent-magenta);
  --rvls-prism-accent-text-a: var(--rvls-color-oil-cyan-deep);
  --rvls-prism-accent-text-b: var(--rvls-color-link-on-paper);
  --rvls-prism-chrome-font: var(--rvls-font-interface);
  --rvls-prism-display-font: var(--rvls-font-reading);
  --rvls-prism-read-font: var(--rvls-font-reading);
  --rvls-prism-banner-paper: #f0e4c7;
  --rvls-prism-banner-ink: #351624;
  --rvls-prism-banner-hot: var(--rvls-color-oil-magenta);
  --rvls-prism-banner-cool: var(--rvls-color-oil-cyan);
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  :root {
    --rvls-motion-duration-instant: 0.01ms;
    --rvls-motion-duration-fast: 0.01ms;
    --rvls-motion-duration-base: 0.01ms;
    --rvls-motion-duration-slow: 0.01ms;
    --rvls-motion-duration-ceremonial: 0.01ms;
    --rvls-motion-intensity: 0;
  }
}

@media (pointer: coarse) {
  :root {
    --rvls-control-size: var(--rvls-touch-target);
  }
}

:root[data-mode="phone"] {
  --rvls-titlebar-height: var(--rvls-touch-target);
  --rvls-control-size: var(--rvls-touch-target);
  --rvls-motion-intensity: 0;
}