/* Ordia DS foundation host
   Source-backed CSS custom property emission for source-backed proofs and DS hosts.
   Values are derived from:
   - design-system/foundations/colour.tokens.json
   - design-system/foundations/typography.tokens.json

   The alias variables preserve the current component CSS consumption contract
   while the token files remain the canonical value source.
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  color-scheme: dark;

  /* Colour foundation */
  --surface-01: rgba(255,255,255,0.024); /* CL-01 */
  --surface-02: rgba(255,255,255,0.04); /* CL-02 */
  --border-01: rgba(255,255,255,0.08); /* CL-03 */
  --border-02: rgba(255,255,255,0.14); /* CL-04 */
  --text-primary: #f2eee8; /* CL-05 */
  --text-muted: rgba(255,255,255,0.68); /* CL-06 */
  --helper-text: #a9b6bd; /* CL-07 */
  --supportive-selected-fill: rgba(0,163,136,0.06); /* CL-08 */
  --supportive-selected-stroke: rgba(0,163,136,0.35); /* CL-09 */
  --semantic-blue-grey-fill: rgba(136,167,183,0.14); /* CL-10 */
  --semantic-blue-grey-stroke: rgba(136,167,183,0.62); /* CL-11 */
  --attached-reveal-fill: rgba(255,255,255,0.012); /* CL-12 */
  --focus-halo: rgba(136,167,183,0.08); /* CL-13 */
  --tab-active-underline: #ffc000; /* CL-14 */
  --guidance-blue: #6EA8FF; /* CL-15 */
  --guidance-border: rgba(110,168,255,0.30); /* CL-16 */
  --guidance-surface-flat: rgba(110,168,255,0.12); /* CL-17 */
  --guidance-surface-soft: rgba(110,168,255,0.075); /* CL-18 */
  --guidance-surface-gradient: linear-gradient(180deg, rgba(110,168,255,0.11), rgba(255,255,255,0.018)); /* CL-19 */
  --warning-note-accent: #FFC000; /* CL-20 */
  --warning-note-border: rgba(255,192,0,0.26); /* CL-21 */
  --warning-note-surface: rgba(255,192,0,0.055); /* CL-22 */
  --success-note-accent: #00A388; /* CL-23 */
  --success-note-border: rgba(0,163,136,0.30); /* CL-24 */
  --success-note-surface: rgba(0,163,136,0.055); /* CL-25 */
  --error-note-accent: #e24b4a; /* CL-26 */
  --error-note-border: rgba(226,75,74,0.30); /* CL-27 */
  --error-note-surface: rgba(226,75,74,0.055); /* CL-28 */
  --text-disabled: rgba(152,165,173,0.34); /* CL-29 */
  --primary-disabled-fill: rgba(255,192,0,0.16); /* CL-30 */
  --primary-disabled-border: rgba(255,192,0,0.18); /* CL-31 */
  --primary-disabled-text: rgba(242,238,232,0.38); /* CL-32 */

  /* Current component-consumption aliases */
  --bg: #0f0f0f;
  --app-bg: #111314;
  --surface: #1a1a1a;
  --surface2: #222222;
  --panel-bg: var(--surface);
  --control-bg: var(--surface2);
  --overlay-bg: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)), var(--surface);
  --panel-subtle: rgba(255,255,255,0.025);
  --panel-subtle-strong: rgba(255,255,255,0.035);
  --panel-hover-soft: rgba(255,255,255,0.04);
  --border: var(--border-01);
  --border2: var(--border-02);
  --line: var(--border-01);
  --line-strong: var(--border-02);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --helper: var(--helper-text);
  --subtext: #98a5ad;
  --text-faint: rgba(255,255,255,0.42);
  --selection: var(--supportive-selected-fill);
  --selection-line: var(--supportive-selected-stroke);
  --selected-bg: rgba(255,192,0,0.08);
  --selected-bg-strong: rgba(255,192,0,0.12);
  --positive-bg: rgba(0,163,136,0.05);
  --positive-border: var(--supportive-selected-stroke);
  --danger-bg: rgba(226,75,74,0.07);
  --accent: var(--success-note-accent);
  --accent2: var(--success-note-accent);
  --accent-error: var(--error-note-accent);
  --ds-text-primary: var(--text-primary);
  --ds-text-muted: var(--text-muted);
  --anim-fast: 0.15s;
  --anim-medium: 0.3s;
  --anim-panel: 0.35s;
  --anim-fade: 0.22s;

  /* Typography foundation */
  --font: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "DM Serif Display", Georgia, serif;

  /* Shared DS host geometry consumed by current component CSS */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-4-5: 20px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-2sm: 14px;
  --radius-xl: 16px;
  --radius-control: 14px;
  --radius-row: var(--radius-sm);
  --radius-menu: var(--radius-lg);
  --radius-pill: 999px;
}