/* oruk spectrum identity · 2026-09 */
:root {
  color-scheme: light;
  --brand-ivory: #f7f7ed;
  --brand-teal: #195a69;
  --brand-cyan: #0c91cc;
  --brand-navy: #302e69;
  --brand-violet: #6b2e74;
  --brand-rose: #b04857;
  --brand-orange: #ed772f;
  /* Match the existing 1120 × 158 SVG, including its centered letterboxing.
     All accents reveal a crop of this single viewport-anchored color field. */
  --brand-field-width: min(100vw, 1063.291139px); /* 150 × 1120 / 158 */
  --brand-field-left: calc((100vw - var(--brand-field-width)) / 2);
  --brand-stop-teal: calc(var(--brand-field-left) + var(--brand-field-width) * .15);
  --brand-stop-cyan: calc(var(--brand-field-left) + var(--brand-field-width) * .32);
  --brand-stop-navy: calc(var(--brand-field-left) + var(--brand-field-width) * .46);
  --brand-stop-violet: calc(var(--brand-field-left) + var(--brand-field-width) * .6);
  --brand-stop-rose: calc(var(--brand-field-left) + var(--brand-field-width) * .74);
  --brand-stop-orange: calc(var(--brand-field-left) + var(--brand-field-width) * .88);
  --brand-gradient: linear-gradient(90deg, var(--brand-teal) var(--brand-stop-teal), var(--brand-cyan) var(--brand-stop-cyan), var(--brand-navy) var(--brand-stop-navy), var(--brand-violet) var(--brand-stop-violet), var(--brand-rose) var(--brand-stop-rose), var(--brand-orange) var(--brand-stop-orange));
  --brand-gradient-ink: linear-gradient(90deg, var(--brand-teal) var(--brand-stop-teal), color-mix(in srgb, var(--brand-cyan) 74%, black) var(--brand-stop-cyan), var(--brand-navy) var(--brand-stop-navy), var(--brand-violet) var(--brand-stop-violet), var(--brand-rose) var(--brand-stop-rose), color-mix(in srgb, var(--brand-orange) 70%, black) var(--brand-stop-orange));
  --brand-gradient-control: linear-gradient(rgb(0 0 0 / 28%), rgb(0 0 0 / 28%)), var(--brand-gradient);
  --background: var(--brand-ivory);
  --foreground: #21353d;
  --card: #fdfdf7;
  --card-foreground: var(--foreground);
  --popover: #fdfdf7;
  --popover-foreground: var(--foreground);
  --primary: var(--brand-teal);
  --primary-foreground: var(--brand-ivory);
  --secondary: #edeee4;
  --secondary-foreground: var(--foreground);
  --muted: #edeee4;
  --muted-foreground: #5c6d72;
  --accent: #e4eeeb;
  --accent-foreground: var(--brand-teal);
  --destructive: var(--brand-rose);
  --border: #d6ded8;
  --input: #bdccc8;
  --ring: var(--brand-teal);
  --chart-1: var(--brand-teal);
  --chart-2: var(--brand-cyan);
  --chart-3: var(--brand-violet);
  --chart-4: var(--brand-rose);
  --chart-5: var(--brand-orange);
  --radius: 0.75rem;
  --radius-control: 0px;
  --sidebar: var(--card);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--brand-teal);
  --sidebar-primary-foreground: var(--brand-ivory);
  --sidebar-accent: var(--secondary);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--brand-teal);
  --warm: var(--brand-orange);
  --warm-foreground: #302e69;
}

@media (max-width: 639px) {
  :root {
    /* The mobile waveform extends 80 px past each edge, at 100 px high. */
    --brand-field-width: min(calc(100vw + 160px), 708.860759px);
  }
}

:root {
  --brandmark-teal: #306a78;
  --brandmark-cyan: #249cd1;
  --brandmark-navy: #454378;
  --brandmark-violet: #7a4382;
  --brandmark-rose: #b85a68;
  --brandmark-orange: #ef8544;
}