/* Look "quiet": Quiet professional. The standard look: today's calm blue-grey palette, with less rounded buttons.
   ONE self-contained file: contract tokens only (styles/tokens/contract.json), a light and a designed
   dark half, inside @layer brand. Groups: surfaces and text, main action and selection, status tones,
   sidebar, charts, canvas, then shape, density, type, shadows and the button knobs (light block only).
   Every text/background pair clears WCAG AA 4.5:1 (__tests__/looks.test.ts). To make another look: see
   apps/web/THEMING.md. The layer statement repeats the app's order so load order never matters. */
@layer theme, base, brand, user, components, utilities;

@layer brand {
  :root[data-theme="quiet"] {
    /* Surfaces and text */
    --background: 226 30% 96.5%;
    --foreground: 226 40% 13%;
    --card: 0 0% 100%;
    --popover: 0 0% 100%;
    --secondary: 226 30% 95%;
    --secondary-foreground: 226 40% 18%;
    --muted: 226 30% 96%;
    --muted-foreground: 226 16% 34%;
    --accent: 226 32% 94%;
    --accent-foreground: 226 40% 16%;
    --border: 226 20% 93%;
    --input: 226 22% 86%;
    /* Main action and selection */
    --primary: 226 68% 47%;
    --primary-foreground: 0 0% 100%;
    --brand: 12 76% 44%;
    --selected-border: 226 68% 42%;
    --selected-hover: 226 70% 96%;
    /* Status tones */
    --destructive: 2 70% 47%;
    --destructive-foreground: 0 0% 100%;
    --success: 152 62% 30%;
    --success-foreground: 0 0% 100%;
    --success-soft: 152 55% 95%;
    --success-soft-foreground: 152 62% 24%;
    --success-border: 152 40% 80%;
    --warning: 34 82% 34%;
    --warning-foreground: 0 0% 100%;
    --warning-soft: 34 90% 95%;
    --warning-soft-foreground: 34 82% 28%;
    --warning-border: 34 70% 78%;
    --error-soft: 2 80% 96%;
    --error-soft-foreground: 2 70% 40%;
    --error-border: 2 60% 85%;
    --info-soft: 226 80% 96%;
    --info-soft-foreground: 226 68% 38%;
    --info-border: 226 50% 85%;
    --highlight: 272 62% 50%;
    --highlight-foreground: 0 0% 100%;
    --highlight-soft: 272 70% 96%;
    --highlight-soft-foreground: 272 62% 40%;
    --highlight-border: 272 45% 86%;
    /* Sidebar */
    --sidebar-background: 226 34% 97%;
    --sidebar-foreground: 226 40% 15%;
    --sidebar-accent: 226 32% 93%;
    --sidebar-border: 226 22% 89%;
    /* Charts */
    --chart-1: 226 68% 50%;
    --chart-2: 172 58% 32%;
    --chart-3: 278 55% 52%;
    --chart-4: 34 82% 42%;
    --chart-5: 342 62% 46%;
    /* Canvas */
    --canvas-bg: 226 28% 96%;
    --canvas-grid-minor: 226 22% 91%;
    --canvas-grid-major: 226 20% 82%;
    --canvas-node-surface: 0 0% 100%;
    --canvas-node-border: 226 20% 57%;
    --canvas-node-border-active: 34 88% 41%;
    --canvas-node-border-error: 2 70% 50%;
    --canvas-edge-default: 226 14% 58%;
    --canvas-port-input: 172 58% 38%;
    --canvas-port-output: 34 88% 46%;
    --canvas-pill-idle: 226 20% 86%;
    --canvas-pill-done: 152 58% 38%;
    --canvas-tone-round1: 226 68% 52%;
    --canvas-tone-round2: 272 60% 56%;
    --canvas-tone-coordinator: 152 58% 36%;
    --canvas-tone-gold: 34 88% 39%;
    --canvas-tone-knowledge: 172 58% 26%;
    --canvas-tone-egress: 24 74% 32%;
    --canvas-tone-knowledge-0: 162 70% 30%;
    --canvas-tone-knowledge-1: 160 55% 38%;
    --canvas-tone-knowledge-2: 150 48% 44%;
    --canvas-tone-knowledge-3: 140 40% 50%;
    /* Shape, density, type, shadows and the button knobs */
    --radius: 6px;
    --button-radius: 4px;
    --button-quiet-bg: hsl(var(--background));
    --button-quiet-border: hsl(var(--border));
    --button-quiet-hover-bg: hsl(var(--accent));
  }

  :root[data-theme="quiet"].dark {
    /* Surfaces and text */
    --background: 226 32% 9%;
    --foreground: 226 25% 96%;
    --card: 226 26% 13%;
    --popover: 226 28% 12%;
    --secondary: 226 20% 20%;
    --secondary-foreground: 226 25% 96%;
    --muted: 226 20% 19%;
    --muted-foreground: 226 16% 68%;
    --accent: 226 22% 22%;
    --accent-foreground: 226 25% 96%;
    --border: 226 18% 18%;
    --input: 226 18% 26%;
    /* Main action and selection */
    --primary: 226 90% 72%;
    --primary-foreground: 226 40% 12%;
    --brand: 12 90% 66%;
    --selected-border: 226 90% 64%;
    --selected-hover: 226 45% 22%;
    /* Status tones */
    --destructive: 2 80% 68%;
    --destructive-foreground: 226 40% 10%;
    --success: 152 60% 55%;
    --success-foreground: 226 40% 10%;
    --success-soft: 152 40% 14%;
    --success-soft-foreground: 152 55% 68%;
    --success-border: 152 30% 28%;
    --warning: 34 90% 62%;
    --warning-foreground: 226 40% 10%;
    --warning-soft: 34 45% 14%;
    --warning-soft-foreground: 34 85% 70%;
    --warning-border: 34 35% 30%;
    --error-soft: 2 45% 15%;
    --error-soft-foreground: 2 80% 75%;
    --error-border: 2 35% 32%;
    --info-soft: 226 40% 16%;
    --info-soft-foreground: 226 85% 78%;
    --info-border: 226 35% 32%;
    --highlight: 272 80% 74%;
    --highlight-foreground: 226 40% 12%;
    --highlight-soft: 272 35% 17%;
    --highlight-soft-foreground: 272 75% 80%;
    --highlight-border: 272 30% 34%;
    /* Sidebar */
    --sidebar-background: 226 34% 7%;
    --sidebar-foreground: 226 25% 95%;
    --sidebar-accent: 226 20% 18%;
    --sidebar-border: 226 18% 18%;
    /* Charts */
    --chart-1: 226 88% 70%;
    --chart-2: 172 58% 54%;
    --chart-3: 278 72% 72%;
    --chart-4: 34 86% 62%;
    --chart-5: 342 76% 68%;
    /* Canvas */
    --canvas-bg: 226 30% 10%;
    --canvas-grid-minor: 226 20% 15%;
    --canvas-grid-major: 226 18% 22%;
    --canvas-node-surface: 226 26% 14%;
    --canvas-node-border: 226 18% 46%;
    --canvas-node-border-active: 34 88% 58%;
    --canvas-node-border-error: 2 76% 62%;
    --canvas-edge-default: 226 14% 52%;
    --canvas-port-input: 172 55% 52%;
    --canvas-port-output: 34 88% 58%;
    --canvas-pill-idle: 226 18% 26%;
    --canvas-pill-done: 152 58% 52%;
    --canvas-tone-round1: 226 88% 70%;
    --canvas-tone-round2: 272 76% 72%;
    --canvas-tone-coordinator: 152 58% 54%;
    --canvas-tone-gold: 34 88% 60%;
    --canvas-tone-knowledge: 172 55% 52%;
    --canvas-tone-egress: 24 82% 62%;
    --canvas-tone-knowledge-0: 162 62% 50%;
    --canvas-tone-knowledge-1: 160 50% 56%;
    --canvas-tone-knowledge-2: 150 44% 60%;
    --canvas-tone-knowledge-3: 140 38% 64%;
  }
}