/*
  Lemurian Studios client area: design tokens. The only file allowed to hold raw values.

  Layer 1  Primitives: raw values, named for what they are.
  Layer 2  Semantic: named for the job. Components reference ONLY these.
  Layer 3  Component tokens are declared next to each component in app.css.

  Breakpoints: desktop from 1200px, tablet 810-1199px, phone under 810px.
  Media queries cannot read custom properties, so every responsive switch lives here.
*/

:root {
  /* ---------- 1. Primitives ---------- */

  /* Colour */
  --abyss: #050807;
  --ink: #0b0f0e;
  --bone: #f3efe6;
  --paper-warm: #e9e5db;
  --paper-cool: #bfc3b5;
  --glow: #4df5c8;
  --lagoon: #0f2724;
  --moss: #3f5a4b;
  --fern: #9db5a2;
  --sage: #8a9784;
  --mist: #a8baaa;
  --error: rgb(176, 64, 48);
  --ink-a30: rgba(11, 15, 14, 0.3);
  --ink-a50: rgba(11, 15, 14, 0.5);
  --ink-a60: rgba(11, 15, 14, 0.6);
  --ink-a70: rgba(11, 15, 14, 0.7);
  --ink-a22: rgba(11, 15, 14, 0.22);
  --bone-a75: rgba(243, 239, 230, 0.75);
  --bone-a25: rgba(243, 239, 230, 0.25);
  --glow-a28: rgba(77, 245, 200, 0.28);
  --bone-a55: rgba(243, 239, 230, 0.55);

  /* Type faces (with system fallbacks) */
  --face-clash-display: "Clash Display", "Helvetica Neue", Arial, sans-serif;
  --face-boska: "Boska", Georgia, "Times New Roman", serif;
  --face-geist-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600;

  /* Type sizes */
  --size-12: 12px;
  --size-13: 13px;
  --size-18: 18px;
  --size-20: 20px;
  --size-21: 21px;
  --size-22: 22px;
  --size-24: 24px;
  --size-26: 26px;
  --size-28: 28px;
  --size-34: 34px;
  --size-40: 40px;
  --leading-105: 1.05em;
  --leading-115: 1.15em;
  --leading-120: 1.2em;
  --leading-140: 1.4em;
  --leading-160: 1.6em;
  --tracking-minus-3: -0.03em;
  --tracking-minus-2: -0.02em;
  --tracking-12: 0.12em;
  --tracking-16: 0.16em;

  /* Spacing scale */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-14: 14px;
  --space-20: 20px;
  --space-28: 28px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-72: 72px;
  --space-128: 128px;

  /* Other sizes */
  --size-1: 1px;
  --size-2: 2px;
  --size-38: 38px;
  --size-56: 56px;
  --size-64: 64px;
  --size-96: 96px;
  --size-140: 140px;
  --size-720: 720px;
  --size-3: 3px;
  --size-10: 10px;
  --size-16: 16px;
  --size-30: 30px;
  --size-48: 48px;
  --width-176: 176px;
  --width-300: 300px;
  --viewport-100: 100vh;
  --width-440: 440px;
  --width-880: 880px;
  --width-1320: 1320px;

  /* Shape, motion, depth */
  --radius-0: 0px;
  --radius-999: 999px;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-500: 0.5s;
  --shadow-glow-48: 0 0 48px var(--glow-a28);
  --shadow-lift-34: 0 14px 34px var(--ink-a22);

  /* ---------- 2. Semantic ---------- */

  /* Surfaces and text */
  --color-page-bg: var(--abyss);
  --color-text-on-dark: var(--bone);
  --color-text-on-dark-muted: var(--bone-a75);
  --color-panel-bg: var(--mist);
  --color-panel-alt-bg: var(--fern);
  --color-text-on-panel: var(--ink);
  --color-accent: var(--glow);

  /* Primary action */
  --color-action-bg: var(--ink);
  --color-action-text: var(--bone);
  --color-action-arrow: var(--glow);
  --color-action-hover-bg: var(--glow);
  --color-action-hover-text: var(--ink);
  --color-action-success-bg: var(--glow);
  --color-action-success-text: var(--ink);
  --color-action-error-bg: var(--error);
  --color-action-error-text: var(--bone);
  --color-action-disabled-bg: var(--sage);
  --color-action-disabled-text: var(--ink-a70);

  /* Fields. The specified 30% ink underline and 50% placeholder fail WCAG AA on mist
     (about 1.6:1 and 3.0:1), so the semantic mapping uses stronger ink tints:
     underline 60% (about 4.0:1, needs 3:1), placeholder 70% (about 5.2:1, needs 4.5:1). */
  --color-field-border: var(--ink-a60);
  --color-field-border-focus: var(--ink);
  --color-field-placeholder: var(--ink-a70);
  --color-field-text: var(--ink);
  --color-field-disabled-text: var(--ink-a60);
  /* Error red on mist is only about 2.8:1, so error text sits on an error fill
     with bone text (about 5.0:1) and always carries the word "Error". */
  --color-error-bg: var(--error);
  --color-error-text: var(--bone);
  --color-field-border-error: var(--ink);

  /* Status chips: the label text carries the meaning; fills are a second cue.
     All fills keep ink text at 6:1 or better. */
  --color-chip-text: var(--ink);
  --color-chip-received-bg: var(--paper-warm);
  --color-chip-working-bg: var(--fern);
  --color-chip-waiting-bg: var(--glow);
  --color-chip-done-bg: var(--sage);

  /* Lists, notices, empty states */
  --color-row-divider: var(--bone-a25);
  --color-row-divider-on-panel: var(--ink-a30);
  --color-notice-bg: var(--fern);
  --color-notice-text: var(--ink);
  --color-empty-bg: var(--lagoon);
  --color-empty-text: var(--bone);

  /* Links and focus */
  --color-link-nav: var(--bone);
  --color-link-nav-hover: var(--glow);
  --color-link-content: var(--ink);
  --color-focus-on-dark: var(--glow);
  --color-focus-on-panel: var(--ink);

  /* Signed-in app: black sidebar, mint canvas. Bone at 55% on abyss is about 5.3:1. */
  --color-sidebar-bg: var(--abyss);
  --color-sidebar-link: var(--bone-a55);
  --color-sidebar-link-active: var(--bone);
  --color-canvas-bg: var(--mist);
  --color-canvas-text: var(--ink);
  --color-canvas-muted: var(--ink-a70);
  --color-canvas-divider: var(--ink-a30);
  --color-card-dark-bg: var(--abyss);
  --color-card-dark-text: var(--bone);
  --color-card-dark-muted: var(--bone-a75);
  --color-card-dark-divider: var(--bone-a25);
  --color-card-dark-accent: var(--glow);
  --color-card-light-bg: var(--fern);
  --color-card-light-text: var(--ink);
  --color-card-light-muted: var(--ink-a70);
  --color-card-light-divider: var(--ink-a30);
  --color-card-light-accent: var(--moss);
  --color-health-ok-bg: var(--glow);
  --color-health-ok-text: var(--ink);
  --color-health-trouble-bg: var(--error);
  --color-health-trouble-text: var(--bone);
  --color-health-unknown-bg: var(--paper-warm);
  --color-health-unknown-text: var(--ink);
  --color-progress-on: var(--ink);
  --color-progress-off: var(--ink-a22);
  --color-tab-border: var(--ink-a30);
  --color-tab-active-bg: var(--ink);
  --color-tab-active-text: var(--bone);
  --type-nav-size: var(--size-28);
  --type-display-size: var(--size-48);
  --mark-size: var(--size-30);
  --dot-size: var(--size-10);
  --line-progress: var(--size-3);

  /* Signed-in app layout (switched per breakpoint below) */
  --layout-app-columns: var(--width-300) minmax(0, 1fr);
  --layout-app-rows: auto;
  --layout-app-pad: var(--size-16);
  --layout-side-position: sticky;
  --layout-side-height: calc(var(--viewport-100) - 2 * var(--size-16));
  --layout-nav-direction: column;
  --layout-canvas-pad-y: var(--space-48);
  --layout-canvas-pad-x: var(--space-56);
  --layout-site-columns: repeat(2, minmax(0, 1fr));
  --layout-req-columns: minmax(0, 1.4fr) var(--width-176) minmax(0, 1.2fr) var(--width-176);

  /* Type roles */
  --font-display: var(--face-clash-display);
  --font-body: var(--face-boska);
  --font-ui: var(--face-geist-mono);
  --weight-display: var(--weight-600);
  --weight-body: var(--weight-400);
  --weight-ui: var(--weight-500);
  --type-heading-size: var(--size-40);
  --type-heading-leading: var(--leading-105);
  --type-heading-tracking: var(--tracking-minus-3);
  --type-h3-size: var(--size-26);
  --type-h3-leading: var(--leading-115);
  --type-h3-tracking: var(--tracking-minus-2);
  --type-body-size: var(--size-21);
  --type-body-leading: var(--leading-160);
  --type-input-size: var(--size-22);
  --type-input-leading: var(--leading-120);
  --type-label-size: var(--size-12);
  --type-legend-size: var(--size-18);
  --type-label-tracking: var(--tracking-12);
  --type-label-leading: var(--leading-140);
  --type-button-size: var(--size-13);
  --type-button-tracking: var(--tracking-16);

  /* Layout */
  --layout-container: var(--width-1320);
  --layout-text: var(--width-880);
  --layout-form: var(--width-440);
  --layout-embed-height: var(--size-720);
  --layout-page-x: var(--space-48);
  --layout-section-y: var(--size-96);
  --gap-xs: var(--space-4);
  --gap-s: var(--space-8);
  --gap-m: var(--space-14);
  --gap-l: var(--space-20);
  --gap-xl: var(--space-28);
  --gap-2xl: var(--space-40);
  --gap-3xl: var(--space-56);

  /* Shape, motion, depth */
  --radius-default: var(--radius-0);
  --radius-pill: var(--radius-999);
  --motion-ease: var(--ease-out-expo);
  --motion-duration: var(--duration-500);
  --shadow-accent: var(--shadow-glow-48);
  --shadow-button: var(--shadow-lift-34);
  --line-thin: var(--size-1);
  --line-thick: var(--size-2);
  --focus-ring-width: var(--size-2);
  --focus-ring-offset: var(--space-4);
  --control-height: var(--size-56);
  --control-height-multiline: var(--size-140);
  --button-pad-y: var(--size-22);
  --button-pad-x: var(--size-38);
  --link-underline-offset: var(--space-8);
}

/* Tablet: 810-1199px */
@media (max-width: 1199px) {
  :root {
    --type-heading-size: var(--size-34);
    --type-h3-size: var(--size-24);
    --type-body-size: var(--size-20);
    --type-display-size: var(--size-40);
    --type-nav-size: var(--size-21);
    --layout-app-columns: minmax(0, 1fr);
    --layout-app-rows: auto minmax(0, 1fr);
    --layout-side-position: static;
    --layout-side-height: auto;
    --layout-nav-direction: row;
    --layout-req-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Phone: under 810px */
@media (max-width: 809px) {
  :root {
    --type-heading-size: var(--size-28);
    --type-h3-size: var(--size-21);
    --type-body-size: var(--size-18);
    --layout-page-x: var(--space-20);
    --layout-section-y: var(--size-64);
    --type-display-size: var(--size-34);
    --type-nav-size: var(--size-18);
    --layout-app-pad: var(--space-8);
    --layout-canvas-pad-x: var(--space-20);
    --layout-canvas-pad-y: var(--space-28);
    --layout-site-columns: minmax(0, 1fr);
    --layout-req-columns: minmax(0, 1fr);
  }
}