/* CloudCell design system. Values are owned here; components consume them. */
:root {
  color-scheme: light;

  /* Color: DESIGN.md A2. */
  --brand: #F04D21;
  --brand-action: #D24017;
  --brand-action-hover: #C43B14;
  --brand-action-active: #B93917;
  --brand-text: var(--brand-action-hover);
  --brand-deep: #841E13;
  --brand-tint: #FDF1EC;
  --brand-rgb: 240 77 33;
  --ink: #0B1113;
  --ink-muted: rgb(11 17 19 / 60%);
  --ink-faint: rgb(11 17 19 / 40%);
  --surface-canvas: #F5F2EC;
  --surface-raised: #FFFFFF;
  --surface-inset: color-mix(in srgb, var(--surface-canvas) 91%, #9E693D);
  --surface-boundary: rgb(11 17 19 / 7%);
  --surface-divider: rgb(11 17 19 / 12%);

  /* Basecoat / shadcn semantic mapping. Accent is a neutral hover tint. */
  --background: var(--surface-canvas);
  --foreground: var(--ink);
  --card: var(--surface-raised);
  --card-foreground: var(--ink);
  --popover: var(--surface-raised);
  --popover-foreground: var(--ink);
  --primary: var(--brand-action);
  --primary-foreground: #FFFFFF;
  --secondary: var(--ink);
  --secondary-foreground: #FFFFFF;
  --muted: var(--surface-inset);
  --muted-foreground: var(--ink-muted);
  --accent: rgb(11 17 19 / 5%);
  --accent-foreground: var(--ink);
  --destructive: var(--brand-deep);
  --border: var(--surface-divider);
  --input: rgb(11 17 19 / 46%);
  --ring: var(--ink);
  --radius: 0.625rem;

  /* Typography: the existing site scale, DESIGN.md A3. */
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-display: clamp(2.35rem, 3.6vw, 3.25rem);
  --text-h2: clamp(1.75rem, 2.6vw, 2.5rem);
  --text-h3: clamp(1.25rem, 1.6vw, 1.5rem);
  --text-lead: clamp(1.0625rem, 1.2vw, 1.25rem);
  --text-body: 1rem;
  --text-sm: 0.875rem;
  --text-label: 0.75rem;
  --text-numeral: clamp(2.25rem, 3.2vw, 3.75rem);
  --lh-display: 1;
  --lh-h2: 1.05;
  --lh-h3: 1.2;
  --lh-lead: 1.45;
  --lh-body: 1.55;
  --lh-label: 1.3;
  --lh-numeral: 0.85;
  --tracking-display: -0.035em;
  --tracking-h2: -0.025em;
  --tracking-h3: -0.015em;
  --tracking-lead: -0.01em;
  --tracking-label: 0.06em;
  --tracking-numeral: -0.05em;
  --weight-body: 400;
  --weight-label: 500;
  --weight-strong: 600;
  --weight-heading: 700;

  /* Layout and space: DESIGN.md A4 and A7. */
  --max: 1240px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --columns: 12;
  --column-gap: 24px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --space-160: 160px;
  --section: clamp(5rem, 9vw, 9rem);
  --frame-inset: clamp(24px, 4vw, 56px);

  /* Shape and elevation: DESIGN.md A5. */
  --radius-control: 10px;
  --radius-panel: 16px;
  --radius-full: 999px;
  --shadow-rgb: 53 36 24;
  --shadow-rim: inset 0 0 0 1px var(--surface-boundary);
  --shadow-contact: 0 1px 2px rgb(var(--shadow-rgb) / 6%);
  --shadow-ambient: 0 4px 12px rgb(var(--shadow-rgb) / 4%), 0 16px 36px rgb(var(--shadow-rgb) / 6%);
  --shadow-raised: var(--shadow-rim), var(--shadow-contact), var(--shadow-ambient);
  --shadow-raised-sm: var(--shadow-rim), var(--shadow-contact), 0 4px 10px rgb(var(--shadow-rgb) / 5%);
  --shadow-lifted: 0 0 0 1px var(--surface-boundary), 0 2px 4px rgb(var(--shadow-rgb) / 7%), 0 8px 18px rgb(var(--shadow-rgb) / 8%), 0 24px 48px rgb(var(--shadow-rgb) / 9%);
  --shadow-brand-glow: 0 1px 2px rgb(132 30 19 / 25%), 0 6px 18px -6px rgb(var(--brand-rgb) / 55%);
  --shadow-brand-glow-hover: 0 1px 2px rgb(132 30 19 / 30%), 0 10px 26px -8px rgb(var(--brand-rgb) / 70%);

  /* Motion: DESIGN.md A6. */
  --duration-micro: 160ms;
  --duration-panel: 240ms;
  --duration-enter: 600ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Component measurements and derived states: DESIGN.md A8. */
  --rule-width: 1px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --control-sm: 44px;
  --control: 48px;
  --control-lg: 56px;
  --text-button-sm: 14px;
  --text-button: 15px;
  --text-button-lg: 16px;
  --lh-control: 1.2;
  --tracking-control: normal;
  --icon-size: 16px;
  --lift-control: -1px;
  --lift-card: -2px;
  --shift-arrow: 3px;
  --surface-clear: transparent;
  --primary-highlight: rgb(255 255 255 / 24%);
  --secondary-highlight: rgb(255 255 255 / 12%);
  --secondary-hover: color-mix(in srgb, var(--ink) 88%, var(--surface-raised));
  --shadow-primary-highlight: inset 0 1px 0 var(--primary-highlight);
  --shadow-secondary: inset 0 1px 0 var(--secondary-highlight), 0 1px 2px rgb(11 17 19 / 16%), 0 4px 12px rgb(11 17 19 / 12%);
  --card-padding: clamp(24px, 3vw, 32px);
  --band-padding: clamp(24px, 3vw, 32px);
  --reading-measure: 75ch;
  --heading-measure: 18ch;
  --scroll-offset: 104px;
  --section-compact: clamp(48px, 5vw, 80px);
  --hero-height: clamp(440px, calc(100svh - 280px), 520px);
  --header-overlap: 71px;
  --hero-padding: clamp(32px, 3vw, 48px);
  --hero-inset: clamp(32px, 3.2vw, 56px);
  --surface-header: rgb(245 242 236 / 86%);
  --texture-opacity: 0.1;
  --reference-height: 250px;
  --knowledge-card-min-height: 210px;
  --menu-width: 1024px;
  --mask-ink: #000000;
  --text-figure: 11px;
  --text-spec: 13px;
  --text-pbx-display: clamp(38px, 4.04vw, 62px);
  --lh-pbx-display: 1.1;
  --text-pbx-prose: 18px;
  --text-plan-measure: 36px;
  --plan-width: 216px;
  --plan-height: 272px;
  --plan-width-mobile: 82%;
  --scrollbar-thumb: rgb(var(--shadow-rgb) / 24%);
  --scrollbar-track: rgb(var(--shadow-rgb) / 8%);
  --floating-offset: clamp(1rem, 3vw, 2rem);

  /* Legacy aliases: read by unmigrated pages, do not use in new work. */
  --bg: #f5f2ec;
  --surface: #e2e8e9;
  --surface-strong: #6b6e70;
  --legacy-muted: #6b6e70;
  --line: rgb(107 110 112 / 35%);
  --legacy-secondary: #6d6e71;
  --secondary-tint: rgb(109 110 113 / 7%);
  --hover-tint: rgb(109 110 113 / 4%);
  --hover-tint-faint: rgb(109 110 113 / 1%);
  --secondary-line: rgb(109 110 113 / 28%);
  --legacy-accent-hover: #0b1113;
  --legacy-accent-ink: #0b1113;
  --dark: #0b1113;
  --dark-ink: #e2e8e9;
}

/* Resolve chrome aliases at the root, before legacy page overrides inherit. */
:root {
  --chrome-max: var(--max);
  --chrome-gutter: var(--gutter);
  --chrome-line: var(--line);
  --chrome-muted: var(--legacy-muted);
}