/*
 * Rookframe UI design tokens
 *
 * This is the canonical local token source for product UI. Static mockups use
 * these custom properties directly. vtt_runtime_bevy/build.rs validates the
 * file and generates the supported color and pixel values as Rust constants.
 * Keep one custom-property declaration per line so drift failures stay useful.
 */

@font-face {
  font-family: "Rookframe Display";
  src: url("../../../assets/ui/r5_3/fonts/Exo2-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Rookframe UI";
  src: url("../../../assets/ui/r5_3/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Core palette shared by setup screens and tabletop surfaces. */
  --rf-color-void: #070b0d;
  --rf-color-surface: #0b1114;
  --rf-color-surface-raised: #101b1e;
  --rf-color-surface-sunken: #081417;
  --rf-color-surface-hover: #122a2b;
  --rf-color-surface-active: #124a48;
  --rf-color-pale-gold: #e2c46d;
  --rf-color-pale-gold-soft: #f0d98e;
  --rf-color-aqua: #54d8ce;
  --rf-color-aqua-bright: #8af4e8;
  --rf-color-live-green: #7dd989;
  --rf-color-action: #e0554d;
  --rf-color-close-dice-rest-edge: var(--rf-color-action);
  --rf-color-close-dice-hover-edge: #7ddccf;
  --rf-color-close-dice-label: #f7f3ec;
  --rf-color-text: #e7ede8;
  --rf-color-muted-text: #9bb3b1;
  --rf-color-disabled: rgb(40% 48% 47% / 62%);

  /* Managed-window and package-authored native UI palette. */
  --rf-color-package-ink: #010c10;
  --rf-color-package-surface: #041115;
  --rf-color-package-surface-hover: #0a2529;
  --rf-color-package-edge: #465256;
  --rf-color-package-rule: #223237;
  --rf-color-package-text: #d9d4d1;
  --rf-color-package-muted: #91999a;
  --rf-color-package-accent: #44e9e9;
  --rf-color-package-input-surface: #071015;
  --rf-color-package-input-focus: #82f8f4;
  --rf-color-package-input-glow: rgb(24% 58% 55% / 72%);
  --rf-color-package-input-icon: #8cb4ba;
  --rf-color-package-input-control: #ffffff;
  --rf-color-package-gold: #f0bb32;
  --rf-color-package-success: var(--rf-color-live-green);
  --rf-color-package-error: #ef5b54;

  /* Managed action pairings. Foreground and fill are one indivisible contract. */
  --rf-color-package-primary-fill: var(--rf-color-package-accent);
  --rf-color-package-primary-fill-hover: var(--rf-color-package-input-focus);
  --rf-color-package-primary-fill-pressed: #2bc7c7;
  --rf-color-package-primary-edge: #86ffff;
  --rf-color-package-primary-label: var(--rf-color-package-ink);
  --rf-color-package-secondary-fill: var(--rf-color-package-ink);
  --rf-color-package-secondary-fill-hover: var(--rf-color-package-surface-hover);
  --rf-color-package-secondary-fill-pressed: var(--rf-color-surface-active);
  --rf-color-package-secondary-edge: var(--rf-color-package-accent);
  --rf-color-package-secondary-label: var(--rf-color-package-accent);

  /* Global setup and Main Menu surfaces. */
  --rf-color-main-menu-ink: #061013;
  --rf-color-main-menu-ink-glow: #0d2123;
  --rf-color-main-menu-primary: #54e1e0;
  --rf-color-main-menu-primary-hover: #79eeec;
  --rf-color-main-menu-primary-pressed: #3ec4c5;
  --rf-color-main-menu-primary-ink: var(--rf-color-main-menu-ink);
  --rf-color-main-menu-secondary: #17262a;
  --rf-color-main-menu-secondary-hover: #20383b;
  --rf-color-main-menu-secondary-pressed: #28494b;
  --rf-color-main-menu-secondary-edge: #4a7374;
  --rf-color-main-menu-secondary-label: #e2ece9;
  --rf-color-main-menu-card-secondary: #142529;
  --rf-color-main-menu-card-secondary-edge: #355c5e;
  --rf-color-main-menu-health: #a9d991;
  --rf-color-main-menu-card: rgb(14 27 30 / 92%);
  --rf-color-main-menu-card-edge: #29494c;
  --rf-color-main-menu-text: #f7f2e8;
  --rf-color-main-menu-wordmark: #f5f0e5;
  --rf-color-main-menu-muted: #7f9698;
  --rf-color-main-menu-eyebrow: #cba96a;
  --rf-color-main-menu-link: #a7b7b5;
  --rf-color-main-menu-link-accent: #cba96a;
  --rf-color-main-menu-divider: #1c3032;

  /* World Library, creation, and settings surfaces. */
  --rf-color-world-library-panel: #0b1718;
  --rf-color-world-library-panel-edge: #34575a;
  --rf-color-world-library-library-edge: #284244;
  --rf-color-world-library-primary: #b28a4c;
  --rf-color-world-library-primary-hover: #c5a061;
  --rf-color-client-settings-category-active: #142628;
  --rf-color-client-settings-category-active-edge: #56787a;
  --rf-color-client-settings-slider-fill: #c7a56a;
  --rf-color-client-settings-toggle-on: #1d5b5e;
  --rf-color-client-settings-toggle-thumb: #7bdde0;

  /* Tabletop chrome gradients are colors too, so Bevy and CSS share stops. */
  --rf-color-status-gradient-start: rgb(2.5% 5.5% 6.5% / 98%);
  --rf-color-status-gradient-end: rgb(5.5% 11.5% 12% / 98%);
  --rf-color-rail-gradient-start: rgb(6% 10% 11% / 96%);
  --rf-color-rail-gradient-end: rgb(1.8% 3.5% 4% / 94%);
  --rf-color-capsule-gradient-start: rgb(5% 9% 10% / 96%);
  --rf-color-capsule-gradient-end: rgb(1.5% 2.8% 3.2% / 96%);
  --rf-color-panel-gradient-start: rgb(5% 10% 10.5% / 98%);
  --rf-color-panel-gradient-end: rgb(1.2% 2.5% 3% / 98%);

  /* Mockup backdrops and translucent managed-surface planes. */
  --rf-color-tabletop-grid: rgb(84 216 206 / 4%);
  --rf-color-tabletop-near: #243c36;
  --rf-color-tabletop-mid: #132321;
  --rf-color-tabletop-far: #081113;
  --rf-color-managed-chrome: rgb(1 12 16 / 88%);
  --rf-color-managed-section: rgb(4 17 21 / 88%);
  --rf-color-managed-list: rgb(1 12 16 / 50%);
  --rf-color-managed-notice: rgb(7 16 21 / 86%);
  --rf-color-specimen-nav: rgb(7 11 13 / 94%);
  --rf-color-specimen-frame: rgb(0 0 0 / 28%);

  /* Semantic aliases used by new mockups. */
  --rf-canvas: var(--rf-color-void);
  --rf-panel: var(--rf-color-surface-raised);
  --rf-panel-subtle: var(--rf-color-surface-sunken);
  --rf-border: var(--rf-color-package-edge);
  --rf-border-subtle: var(--rf-color-package-rule);
  --rf-content: var(--rf-color-package-text);
  --rf-content-muted: var(--rf-color-package-muted);
  --rf-accent: var(--rf-color-package-accent);
  --rf-hierarchy: var(--rf-color-package-gold);
  --rf-success: var(--rf-color-package-success);
  --rf-danger: var(--rf-color-package-error);
  --rf-focus: var(--rf-color-package-input-focus);

  /* Spatial rhythm. The first eight values are already consumed by Bevy. */
  --rf-space-1: 4px;
  --rf-space-2: 8px;
  --rf-space-3: 12px;
  --rf-space-4: 16px;
  --rf-space-5: 24px;
  --rf-space-6: 32px;
  --rf-space-7: 48px;
  --rf-space-8: 64px;

  /* Host geometry and accessible interaction targets. */
  --rf-control-size: 50px;
  --rf-icon-size: 28px;
  --rf-hit-target-min: 44px;
  --rf-close-dice-width: 136px;
  --rf-close-dice-height: 48px;
  --rf-close-dice-inset: 20px;
  --rf-close-dice-border-width: 2px;
  --rf-close-dice-corner-radius: 4px;
  --rf-focus-width: 2px;
  --rf-focus-offset: 2px;
  --rf-border-width: 1px;
  --rf-radius-sm: 4px;
  --rf-radius-md: 7px;

  /* Managed surfaces: one semantic tree, two responsive presentations. */
  --rf-package-floating-window-width: 960px;
  --rf-package-floating-window-height: 944px;
  --rf-package-initial-dock-width: 560px;
  --rf-package-fixed-header-right-padding: 28px;
  --rf-package-adaptive-two-wide-width: 720px;
  --rf-package-adaptive-three-wide-width: 760px;
  --rf-package-adaptive-four-narrow-width: 680px;
  --rf-package-adaptive-toolbar-wide-width: 700px;

  /* Container grids. Columns are design measurements; features use recipes. */
  --rf-layout-page-columns: 12;
  --rf-layout-page-max-width: 1440px;
  --rf-layout-page-margin: 32px;
  --rf-layout-page-margin-constrained: 24px;
  --rf-layout-page-gutter: 24px;
  --rf-layout-surface-columns: 12;
  --rf-layout-surface-inset: 24px;
  --rf-layout-surface-gutter: 16px;
  --rf-layout-section-action-min: 120px;
  --rf-layout-dock-columns: 4;
  --rf-layout-dock-inset: 24px;
  --rf-layout-dock-inset-constrained: 16px;
  --rf-layout-dock-gutter: 12px;
  --rf-layout-record-identity-min: 180px;
  --rf-managed-host-chrome-height: 56px;
  --rf-managed-task-header-inset: 24px;
  --rf-managed-body-min-height: 320px;

  /* Package typography matches the implemented semantic text roles. */
  --rf-package-type-title: 34px;
  --rf-package-line-title: 44px;
  --rf-package-type-subtitle: 28px;
  --rf-package-line-subtitle: 34px;
  --rf-package-type-heading: 16px;
  --rf-package-line-heading: 20px;
  --rf-package-type-label: 15px;
  --rf-package-line-label: 20px;
  --rf-package-type-value: 28px;
  --rf-package-line-value: 34px;
  --rf-package-type-body: 17px;
  --rf-package-line-body: 23px;
  --rf-package-type-meta: 16px;
  --rf-package-line-meta: 21px;
  --rf-package-type-status: 16px;
  --rf-package-line-status: 22px;
  --rf-package-type-identity: 17px;
  --rf-package-line-identity: 23px;
  --rf-package-type-input: 16px;
  --rf-package-line-input: 22px;
  --rf-package-type-action: 16px;
  --rf-package-line-action: 22px;
  --rf-package-type-action-primary: 18px;
  --rf-package-line-action-primary: 22px;
  --rf-package-type-badge: 13px;
  --rf-package-line-badge: 16px;
  --rf-package-textarea-min-height: 112px;

  /* Package button geometry matches the native semantic component catalogue. */
  --rf-package-button-primary-base-height: 52px;
  --rf-package-button-primary-height: 52px;
  --rf-package-button-primary-width: 254px;
  --rf-package-button-secondary-height: 52px;
  --rf-package-button-secondary-width: 100px;
  --rf-package-button-secondary-split-height: 52px;
  --rf-package-button-secondary-split-width: 130px;
  --rf-package-button-icon-size: 44px;
  --rf-package-button-tab-height: 40px;
  --rf-package-button-quiet-height: 44px;
  --rf-package-button-danger-height: 52px;
  /* The 7.4142px inner cuts keep a one-pixel edge around an 8px 45° chamfer. */
  --rf-package-frame-cut: 8px;
  --rf-package-frame-inner-cut: 7.4142px;
  --rf-package-button-cut: 8px;
  --rf-package-button-inner-cut: 7.4142px;

  /* Global-screen typography. Use Inter; never scale the whole UI canvas. */
  --rf-screen-type-eyebrow: 12px;
  --rf-screen-type-meta: 13px;
  --rf-screen-type-body: 16px;
  --rf-screen-type-label: 14px;
  --rf-screen-type-heading: 24px;
  --rf-screen-type-title: 36px;
  --rf-screen-type-hero: 52px;

  --rf-font-display: "Rookframe Display", "Arial Narrow", sans-serif;
  --rf-font-ui: "Rookframe UI", Inter, system-ui, sans-serif;
  --rf-weight-regular: 400;
  --rf-weight-medium: 500;
  --rf-weight-semibold: 600;
  --rf-weight-bold: 700;
  --rf-weight-extrabold: 800;
  --rf-tracking-label: 0.08em;
  --rf-tracking-eyebrow: 0.16em;
  --rf-transition-fast: 100ms ease-out;
  --rf-transition-state: 160ms ease-out;
  --rf-shadow-window: 0 18px 70px rgb(0 0 0 / 52%);
  --rf-shadow-focus: 0 0 0 2px rgb(130 248 244 / 24%);

  /* Mockup-only component defaults; individual examples may override them. */
  --rf-columns: 2;
  --rf-metric-count: 3;
  --rf-step-count: 6;
  --rf-icon-source: none;
  --rf-progress: 50%;
}