/* freq — the one shared theme.
 * Every surface, size, radius, shadow and timing in the product resolves to a
 * variable defined here. Components never carry their own values.
 * Dark ("graphite") is the default; light ("bone") swaps at the semantic layer. */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* ---- surfaces: warm anodised graphite, each step lifts toward the eye ---- */
  --color-surface-frame: #0d0c0b;
  --color-surface-screen: #151412;
  --color-surface-raised: #1b1a18;
  --color-surface-raised-hover: #22201e;
  --color-surface-selected: #2a2825;
  --color-surface-sunken: #0d0c0b;
  --color-surface-overlay: #1b1a18;
  --color-surface-mention: #221a14;
  --color-surface-mention-hover: #2a1f17;
  --color-surface-accent: #2b1c12;
  --color-surface-accent-hover: #362215;
  --color-surface-danger: #2a1519;
  --color-surface-danger-hover: #361b20;
  --color-surface-success: #13241a;
  --color-surface-scrim: rgba(6, 5, 4, 0.62);

  /* ---- lines ---- */
  --color-border-hairline: #262421;
  --color-border-default: #34312d;
  --color-border-strong: #767067;
  --color-edge-highlight: rgba(255, 244, 228, 0.05);

  /* ---- text ---- */
  --color-text-primary: #ede8e0;
  --color-text-secondary: #aba398;
  --color-text-tertiary: #9a9287;
  --color-text-on-accent: #1a0c04;
  --color-text-on-danger: #fff1ee;

  /* ---- action: one signal colour, one danger colour ---- */
  --color-action-primary: #ff6a2b;
  --color-action-primary-hover: #ff8249;
  --color-action-primary-active: #ea5a1d;
  --color-action-destructive: #c4344a;
  --color-action-destructive-hover: #b42e42;
  --color-action-destructive-active: #a2293b;
  --color-action-danger: var(--color-action-destructive);
  --color-action-danger-hover: var(--color-action-destructive-hover);
  --color-accent-text: #ff8a57;
  --color-accent-border: #5c3321;
  --color-danger-text: #ff7486;
  --color-danger-border: #5a2630;
  --color-success-text: #58c98a;
  --color-focus-ring: #ff8a57;

  /* ---- inverse chips: tooltips and toasts flip to the text colour ---- */
  --color-inverse-kbd: #d3ccc1;
  --color-inverse-accent: #a13a0b;
  --color-inverse-hover: #ddd6cb;

  /* ---- presence ---- */
  --color-status-online: #58c98a;
  --color-status-idle: #e6ac45;
  --color-status-dnd: #ff7486;
  --color-status-offline: #6d675e;


  /* ---- artwork (topographic lines, key art) ---- */
  --color-topo: rgba(255, 106, 43, 0.2);
  --color-topo-strong: rgba(255, 106, 43, 0.34);
  --color-stage-glow: rgba(255, 106, 43, 0.075);
  --color-lamp-glow: rgba(255, 106, 43, 0.55);
  --color-lamp-halo: rgba(255, 106, 43, 0.16);
  --art-sky-top: #0f121a;
  --art-sky-mid: #2b2231;
  --art-sky-low: #7c4431;
  --art-planet: #dcc6a2;
  --art-planet-shade: #a88763;
  --art-ring: rgba(236, 222, 198, 0.55);
  --art-ridge-far: #2a2430;
  --art-ridge-mid: #1d1822;
  --art-ridge-near: #120f15;
  --art-hud: #f3eee6;
  --art-hud-dim: rgba(243, 238, 230, 0.62);
  --art-streak: #ff7a3d;
  --art-map-bg: #18201f;
  --art-map-line: #3c5a57;
  --art-map-site: #e8ddc7;

  /* ---- avatar & crew-tile palette (user content, shared by both themes) ---- */
  --av-bone: #e8ddc7;
  --av-sand: #cdb48a;
  --av-mustard: #d6a23f;
  --av-rust: #b9553a;
  --av-terracotta: #de8a6b;
  --av-sage: #86a07a;
  --av-moss: #4f6b45;
  --av-teal: #3d6c70;
  --av-slate: #5d7896;
  --av-mauve: #8d6c8e;
  --av-ink: #26302e;
  --av-plum: #4a3446;
  --av-signal: #ff6a2b;

  /* ---- depth ---- */
  --shadow-raised: inset 0 1px 0 var(--color-edge-highlight), 0 1px 0 rgba(6, 5, 4, 0.3);
  --shadow-screen: 0 0 0 1px rgba(6, 5, 4, 0.55), 0 30px 70px -30px rgba(6, 5, 4, 0.8);
  --shadow-overlay: 0 22px 56px -14px rgba(6, 5, 4, 0.78), 0 0 0 1px rgba(255, 244, 228, 0.07);
  --shadow-sunken: inset 0 1px 2px rgba(6, 5, 4, 0.55), inset 0 0 0 1px rgba(255, 244, 228, 0.035);
  --shadow-lamp: 0 0 0 3px var(--color-lamp-halo), 0 0 14px var(--color-lamp-glow);
  --shadow-lcd: 0 0 18px var(--color-lamp-glow);
  --shadow-thumb: 0 1px 3px rgba(6, 5, 4, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);

  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.96 0 0 0 0 0.9 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-theme="light"] {
  color-scheme: light;

  --color-surface-frame: #e5e0d7;
  --color-surface-screen: #f5f2ec;
  --color-surface-raised: #fcfaf7;
  --color-surface-raised-hover: #eeeae3;
  --color-surface-selected: #dcd6cb;
  --color-surface-sunken: #ebe7df;
  --color-surface-overlay: #fcfaf7;
  --color-surface-mention: #fbebdd;
  --color-surface-mention-hover: #f7e2d0;
  --color-surface-accent: #fbe6d9;
  --color-surface-accent-hover: #f9d6c1;
  --color-surface-danger: #f8dedf;
  --color-surface-danger-hover: #f3cfd1;
  --color-surface-success: #ddeedf;
  --color-surface-scrim: rgba(40, 32, 24, 0.36);

  --color-border-hairline: #e0dbd1;
  --color-border-default: #d3cdc2;
  --color-border-strong: #807a6f;
  --color-edge-highlight: rgba(255, 255, 255, 0.85);

  --color-text-primary: #1b1916;
  --color-text-secondary: #57514a;
  --color-text-tertiary: #645e55;
  --color-text-on-accent: #1a0c04;
  --color-text-on-danger: #fff6f4;

  --color-action-primary: #ff6a2b;
  --color-action-primary-hover: #ff7d42;
  --color-action-primary-active: #ee5b1e;
  --color-action-destructive: #c22f48;
  --color-action-destructive-hover: #b02841;
  --color-action-destructive-active: #9d2339;
  --color-accent-text: #a13a0b;
  --color-accent-border: #f0b08f;
  --color-danger-text: #b1283f;
  --color-danger-border: #eab0b8;
  --color-success-text: #196b3c;
  --color-focus-ring: #b5440e;

  --color-inverse-kbd: #3a3631;
  --color-inverse-accent: #ff8a57;
  --color-inverse-hover: #2e2a26;

  --color-status-online: #196b3c;
  --color-status-idle: #a26a05;
  --color-status-dnd: #b1283f;
  --color-status-offline: #7d766b;


  --color-topo: rgba(173, 64, 13, 0.16);
  --color-topo-strong: rgba(173, 64, 13, 0.28);
  --color-stage-glow: rgba(255, 106, 43, 0.09);
  --color-lamp-glow: rgba(255, 106, 43, 0.5);
  --color-lamp-halo: rgba(255, 106, 43, 0.18);

  --shadow-raised: inset 0 1px 0 var(--color-edge-highlight), 0 1px 2px rgba(70, 52, 34, 0.08);
  --shadow-screen: 0 0 0 1px rgba(70, 52, 34, 0.08), 0 30px 70px -34px rgba(70, 52, 34, 0.35);
  --shadow-overlay: 0 22px 56px -16px rgba(70, 52, 34, 0.32), 0 0 0 1px rgba(70, 52, 34, 0.1);
  --shadow-sunken: inset 0 1px 2px rgba(70, 52, 34, 0.12), inset 0 0 0 1px rgba(70, 52, 34, 0.06);
  --shadow-thumb: 0 1px 3px rgba(70, 52, 34, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-lcd: 0 0 14px var(--color-lamp-halo);

  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.24 0 0 0 0 0.18 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

:root {
  /* ---- type: an engineered grotesk for the voice, a mono for the labels ---- */
  --font-sans: "Geologica", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Martian Mono", "Cascadia Mono", "Consolas", ui-monospace, monospace;
  --font-display-settings: "SHRP" 60;
  --font-body-settings: "SHRP" 0;
  --mono-narrow: 87.5%;
  --mono-wide: 112.5%;

  --text-2xs: 0.6875rem;   /* 11 */
  --text-xs: 0.75rem;      /* 12 */
  --text-sm: 0.8125rem;    /* 13 */
  --text-md: 0.875rem;     /* 14 */
  --text-base: 0.9375rem;  /* 15 */
  --text-lg: 1.0625rem;    /* 17 */
  --text-xl: 1.25rem;      /* 20 */
  --text-2xl: 1.625rem;    /* 26 */
  --text-3xl: 2.25rem;     /* 36 */
  --text-display-sm: 2.5rem; /* 40, phones */
  --text-display: 3.5rem;  /* 56 */

  --leading-display: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-display: -0.045em;
  --tracking-heading: -0.02em;
  --tracking-body: -0.004em;
  --tracking-label: 0.09em;
  --measure-chat: 72ch;
  --measure-topic: 58ch;

  /* ---- space: 4px rhythm with deliberate jumps at the seams ---- */
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- radius: grows with the size of the object ---- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-screen: 20px;
  --radius-avatar: 30%;
  --radius-full: 999px;

  /* ---- sizes ---- */
  --size-control-xs: 1.5rem;
  --size-control-sm: 1.75rem;
  --size-control-md: 2.25rem;
  --size-control-lg: 2.75rem;
  --size-icon-xs: 0.875rem;
  --size-icon-sm: 1rem;
  --size-icon-md: 1.125rem;
  --size-icon-lg: 1.25rem;
  --size-avatar-2xs: 1rem;
  --size-avatar-xs: 1.25rem;
  --size-avatar-sm: 1.75rem;
  --size-avatar-md: 2.25rem;
  --size-avatar-lg: 2.5rem;
  --size-avatar-xl: 3.25rem;
  --size-status: 0.625rem;
  --size-lamp: 0.5rem;

  /* the tuner: the crew button and a sunken row of frequency tabs */
  --size-brand: 2.5rem;
  --size-band: 14rem;
  --size-band-art: 2rem;
  --size-dial: 2.75rem;
  --size-station-max: 11rem;

  /* the frequency: number plate, transcript columns, side panel */
  --size-plate: 4.5rem;
  --size-plate-mobile: 3.25rem;
  --size-tape-time: 3.25rem;
  --size-tape-time-narrow: 2.75rem;
  --size-tape-who: 8.5rem;
  --size-stamp: 1.5rem;
  --size-panel: 21rem;
  --size-tape-narrow: 44rem;

  /* the deck: one bar with faces, and the sound panel it opens */
  --size-deck-info: 13rem;
  --size-face-max: 9rem;
  --size-mixer: 25rem;
  --size-mixer-max: 70vh;
  --size-sheet-max: 88dvh;
  --size-thumb: 0.875rem;
  --size-track: 0.25rem;
  --size-popover: 18rem;
  --size-modal: 60rem;
  --size-dialog: 26rem;
  --size-auth: 25rem;
  --size-embed: 30rem;
  --size-shot-max: 22rem;
  --size-clip: 27rem;
  --size-toast: 26rem;
  --size-badge: 1.125rem;
  --size-switch-w: 2.25rem;
  --size-switch-h: 1.25rem;
  --size-switch-knob: 1rem;
  --size-play: 3.5rem;
  --size-composer-max: 12rem;
  --size-ring: 2px;
  --size-ring-gap: 3px;
  --size-index-contour: 1.4;
  --size-contour: 0.7;

  /* ---- motion ---- */
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 200ms;
  --duration-moderate: 280ms;
  --duration-slow: 420ms;
  --duration-dots: 1200ms;
  --duration-spin: 800ms;
  --duration-reduced: 1ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --press-scale: 0.97;
  --enter-shift: 6px;
  --drawer-shift: -16px;

  /* ---- layering ---- */
  --z-raised: 1;
  --z-sticky: 10;
  --z-scrim: 25;
  --z-panel: 30;
  --z-drawer: 40;
  --z-popover: 50;
  --z-modal: 60;
  --z-toast: 70;
  --z-tooltip: 80;

  --opacity-disabled: 0.45;
  --opacity-muted: 0.6;

  /* ---- breakpoints: read by scripts/app.js, mirrored by the @media rules in app.css ---- */
  --breakpoint-wide: 1480px;
  --breakpoint-mobile: 860px;

  /* ---- measured at runtime by scripts/app.js: toasts float just above the message field ---- */
  --toast-bottom: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-moderate: 0ms;
    --duration-slow: 0ms;
    --press-scale: 1;
    --enter-shift: 0px;
    --drawer-shift: 0px;
  }
}