/* shadcn/ui Design Tokens.
   Palette (design register: north star): navy text, indigo accent, slate
   surfaces. Dark is designed, not inverted: slate-900 page, slate-800 cards,
   slate-50 text, slate-400 muted, slate-700 hairlines. --primary is the fill
   token (white text on it in light, navy in dark); --info is the accent-as-text
   token (links, active nav), lighter in dark so it reads on slate-900. */
@layer base {
  /* Native controls (select lists, date pickers, scrollbars) follow the theme. Without this a <select> with no
     background class painted light grey (239,239,239) under near-white text in dark mode. */
  :root {
    --heat-1: 0 84% 60%;
    --heat-2: 25 95% 53%;
    --heat-3: 45 93% 47%;
    --heat-4: 84 81% 44%;
    --heat-5: 142 71% 45%;
    --heat-foreground: 0 0% 0%;  /* black on every level: 5.6 or better */ color-scheme: light; }
  .dark { color-scheme: dark; }
  /* Every native select, text input and textarea reads the surface and foreground tokens, so a control with no
     background class is the page colour in both themes (it was the browser's pale grey under light text in dark).
     Layered, so any bg-*/text-* utility on the control still wins. */
  select,
  textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]) {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
  select option,
  select optgroup {
    background-color: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
  }
  input::placeholder,
  textarea::placeholder {
    color: hsl(var(--muted-foreground));
  }
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;
    --primary: 213.2 81.3% 40.7%;  /* the logo's blue, oklch(0.497 0.163 257); white label 5.93:1 */
    --primary-foreground: 0 0% 100%;
    --primary-surface: 213.2 81.3% 40.7%;  /* a large area of brand colour: the same blue as --primary in light */
    --primary-surface-foreground: 0 0% 100%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 215.3 25% 26.7%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 42%; /* 4.9:1 on a bg-primary/10 tint, 5.5:1 on bg-muted (45% was 4.41 on the tint) */
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 42%;  /* alert text on a white card: title 6.07:1, description 5.41:1 (48% gave 4.48 on the description); white label on a fill 6.07:1 */
    --destructive-foreground: 210 40% 98%;
    /* -emphasis: coloured TEXT on the token's own light tint. The base
       --destructive scores 3.30 against bg-destructive/10, below WCAG AA 4.5, so
       every tinted status badge built from it failed. shadcn's -foreground
       variants do not solve this: they are for text on a SOLID fill. */
    --destructive-emphasis: 0 72% 42%;
    --success: 142.1 76.2% 36.3%;
    --success-foreground: 0 0% 100%;
    --success-emphasis: 142.1 76.2% 28%;  /* 4.63 on bg-success/10; base is 2.95 */
    /* Fill and indicator: 4.1:1 on white, 3.8:1 on slate-100 (50.2% lightness was 2.15:1), black text on it 5.1:1 */
    --warning: 32 95% 38%;
    --warning-foreground: 0 0% 0%;
    /* 5.62 on bg-warning/10. --warning-foreground is pure black in BOTH themes,
       which is 19.43 here but 1.19 in dark mode, where bg-warning/10 composites
       to near-black — the AI degraded-mode and provider-health banners were
       unreadable for dark-theme users. */
    --warning-emphasis: 32 95% 30%;
    --info: 213.2 81.3% 40.7%;
    --info-foreground: 0 0% 100%;
    --info-emphasis: 213.2 81.3% 40.7%;
    --border: 214.3 31.8% 91.4%;
    --input: 0 0% 56.1%;  /* oklch(0.65 0 0): control boundary 3.23:1 on white (R10) */
    --ring: 213.2 81.3% 40.7%;
    /* Chart ramp (foundations-v1 section 2): brand blue, orange, deep green, sky, plum; each at least 3.2:1 on the card. */
    --chart-1: 213.2 81.3% 40.7%;
    --chart-2: 29.6 88.4% 45.4%;
    --chart-3: 157.5 90.6% 20.9%;
    --chart-4: 198.3 49.3% 49.7%;
    --chart-5: 289.2 50.7% 30.5%;
    --chart-tint: 213.2 70% 56%;  /* the brand blue, muted: second series beside --chart-1; 3.7:1 on the card */
    /* The logo: --brand is --primary's value held apart so the public marketing palette (which re-points
       --primary to near-black) cannot recolour the mark. */
    --brand: 213.2 81.3% 40.7%;
    --brand-mid: 209 63.5% 62.4%;
    --brand-accent: 178.3 99.1% 42.2%;
    /* Dialog backdrop: navy in both themes, used at 50% (bg-overlay/50). */
    --overlay: 222.2 47.4% 11.2%;
    --radius: 0.5rem;
    /* Sidebar (the library's sidebar-07 shell, components/ui_sidebar.html): aliases of the page tokens. */
    --sidebar: var(--card);
    --sidebar-foreground: var(--foreground);
    --sidebar-accent: var(--accent);
    --sidebar-accent-foreground: var(--accent-foreground);
    --sidebar-border: var(--border);

    /* ArchiMate layer semantic colors (TOGAF ADM phases) */
    --layer-motivation: 263 70% 50%;     /* violet — Goals, Drivers, Outcomes */
    --layer-strategy: 38 92% 50%;        /* amber — Courses of Action */
    --layer-business: 160 84% 39%;       /* emerald — Processes, Roles, Actors */
    --layer-application: 221 83% 53%;    /* blue — Services, Components, Data */
    --layer-technology: 142 71% 45%;     /* green — Nodes, Devices, Networks */
    --layer-implementation: 199 89% 48%; /* sky — Work Packages, Plateaus */
    --layer-risk: 0 84% 60%;            /* red — Assessments, Issues */
    /* Readable text on a `bg-layer-*/10` tint: the base hues above are chosen
       for fill/border distinctness and are far under WCAG AA as text. Same
       relationship as --info / --info-emphasis. */
    --layer-motivation-emphasis: 263 70% 40%;
    --layer-strategy-emphasis: 38 92% 28%;
    --layer-business-emphasis: 160 84% 23%;
    --layer-application-emphasis: 221 83% 42%;
    --layer-technology-emphasis: 142 71% 26%;
    --layer-implementation-emphasis: 199 89% 30%;
    --layer-risk-emphasis: 0 84% 42%;

    /* ArchiMate 3.2 notation colours, as the standard teaches them: strategy tan, business yellow, application
       blue, technology and physical green, motivation lilac, implementation pink, migration pale green,
       location orange. Fill and hairline stroke per layer. The composer canvas, its palette and its legend
       read these and nothing else. */
    --notation-strategy: 39 78% 83%;        --notation-strategy-stroke: 38 55% 38%;
    --notation-business: 60 100% 85%;       --notation-business-stroke: 55 70% 33%;
    --notation-application: 180 100% 86%;   --notation-application-stroke: 190 80% 28%;
    --notation-technology: 104 45% 80%;     --notation-technology-stroke: 120 45% 28%;
    --notation-physical: 104 45% 80%;       --notation-physical-stroke: 120 45% 28%;
    --notation-motivation: 240 100% 90%;    --notation-motivation-stroke: 250 40% 42%;
    --notation-implementation: 0 100% 91%;  --notation-implementation-stroke: 0 50% 42%;
    --notation-migration: 120 70% 90%;      --notation-migration-stroke: 130 45% 32%;
    --notation-location: 30 90% 70%;        --notation-location-stroke: 25 65% 33%;
    --notation-other: var(--background);    --notation-other-stroke: var(--muted-foreground);
  }

  .dark {
    --background: 222.2 47.4% 11.2%;
    --foreground: 210 40% 98%;
    --card: 217.2 32.6% 17.5%;
    --card-foreground: 210 40% 98%;
    --popover: 217.2 32.6% 17.5%;
    --popover-foreground: 210 40% 98%;
    --primary: 215 86.8% 67.2%;  /* oklch(0.70 0.14 257); navy label 6.68:1 */
    --primary-foreground: 222.2 47.4% 11.2%;
    --primary-surface: 215 60% 24%;  /* the brand blue held in the dark range, so a large area sits with the cards around it; white label 10:1 */
    --primary-surface-foreground: 210 40% 98%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    /* Fill AND indicator: a dot or bar in this red must reach 3:1 on the slate-800 card (was 1.5:1) with white text on it at 4.5:1 */
    --destructive: 0 75% 75%;  /* alert text on the slate card: title 6.27:1, description 5.35:1 (74% 52% gave 3.13 and 2.74); a dot or bar 6.27:1 */
    --destructive-foreground: 222.2 47.4% 11.2%;  /* navy label on the lighter red fill 7.65:1 (white would be 2.33) */
    --destructive-emphasis: 0 91% 71%;
    --success: 142.1 70.6% 45.3%;
    --success-foreground: 0 0% 0%;
    --success-emphasis: 142.1 70.6% 60%;  /* light-on-dark counterpart; matches warning/info-emphasis pattern */
    --warning: 45.4 93.4% 47.5%;
    --warning-foreground: 0 0% 0%;
    --warning-emphasis: 45 93% 65%;   /* 11.81 on bg-warning/10 */
    --info: 215 86.8% 67.2%;
    --info-foreground: 222.2 47.4% 11.2%;
    /* --info-emphasis was declared in :root only, so text-info-emphasis
       resolved to an invalid declaration in dark mode and fell back to the
       inherited colour — affecting admin_overview.html and
       _capability_heatmap.html. 9.88 on bg-info/10. */
    --info-emphasis: 213 100% 87%;
    --border: 215.3 25% 26.7%;
    --input: 0 0% 45.2%;  /* oklch(0.556 0 0): 3.79:1 on the dark card, 4.18:1 on the dark page */
    --ring: 215 86.8% 67.2%;
    --brand: 215 86.8% 67.2%;
    --chart-1: 215 86.8% 67.2%;
    --chart-2: 29 90.2% 60.6%;
    --chart-3: 153.1 50.9% 40.5%;
    --chart-4: 199.5 82.7% 73.7%;
    --chart-tint: 215 55% 50%;  /* the brand blue, muted: second series beside --chart-1; 3.1:1 on this dark card */
    --chart-5: 276.2 47.9% 55.5%;  /* oklch(0.58 0.17 310): 0.02 lighter than the spec so it holds 3:1 on this dark card */
    --overlay: 222.2 47.4% 11.2%;

    /* ArchiMate layer semantic colors (dark mode) */
    --layer-motivation: 263 70% 65%;
    --layer-strategy: 38 92% 60%;
    --layer-business: 160 84% 50%;
    --layer-application: 221 83% 65%;
    --layer-technology: 142 71% 55%;
    --layer-implementation: 199 89% 58%;
    --layer-risk: 0 84% 65%;
    --layer-motivation-emphasis: 263 70% 80%;
    --layer-strategy-emphasis: 38 92% 68%;
    --layer-business-emphasis: 160 84% 62%;
    --layer-application-emphasis: 221 83% 74%;
    --layer-technology-emphasis: 142 71% 64%;
    --layer-implementation-emphasis: 199 89% 68%;
    --layer-risk-emphasis: 0 84% 74%;

    --notation-strategy: 38 40% 24%;        --notation-strategy-stroke: 38 55% 65%;
    --notation-business: 58 45% 22%;        --notation-business-stroke: 56 65% 62%;
    --notation-application: 190 50% 22%;    --notation-application-stroke: 190 60% 65%;
    --notation-technology: 125 35% 22%;     --notation-technology-stroke: 125 40% 62%;
    --notation-physical: 125 35% 22%;       --notation-physical-stroke: 125 40% 62%;
    --notation-motivation: 250 35% 26%;     --notation-motivation-stroke: 250 60% 74%;
    --notation-implementation: 0 35% 25%;   --notation-implementation-stroke: 0 60% 72%;
    --notation-migration: 130 35% 22%;      --notation-migration-stroke: 130 45% 62%;
    --notation-location: 30 50% 30%;        --notation-location-stroke: 28 70% 68%;
  }

  /* Public marketing theme. Opt-in: layouts/public_base.html puts this class on <body> for the marketing
     templates only. Neutral palette; values are HSL triplets because tailwind.config.js reads
     hsl(var(--token) / <alpha-value>). Tokens not listed here (success, warning, info, the -emphasis set,
     the ArchiMate layer colours, destructive-foreground) inherit from :root / .dark unchanged. */
  .theme-marketing {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9.1%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9.1%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 44%; /* 4.54:1 on --muted, 4.95:1 on white (WCAG AA) */
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9.1%;
    --destructive: 357.2 100% 45.3%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 63%;
    --radius: 0.625rem;
  }
  .dark .theme-marketing {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9.1%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 358.8 69.3% 30.1%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 45.2%;
  }
}

/* Chart axis labels: the chart script gives each tick label its own fill, which no card colour overrides,
   so on the dark card the labels fell to 2.55:1. */
.cn-chart .recharts-cartesian-axis-tick-value,
.cn-chart .recharts-cartesian-axis-tick-value tspan { fill: hsl(var(--muted-foreground)); }

/* ArchiMate layer border-left utilities (missing from Tailwind JIT scan) */
.border-l-violet-500 { border-left-color: #8b5cf6 !important; }
.border-l-sky-500    { border-left-color: #0ea5e9 !important; }
.border-l-purple-500 { border-left-color: #a855f7 !important; }
.border-l-green-500  { border-left-color: #22c55e !important; }
.border-l-slate-500  { border-left-color: #64748b !important; }
.border-l-primary-500 { border-left-color: hsl(var(--primary)) !important; }

/* ArchiMate layer badge backgrounds (missing from Tailwind JIT scan) */
.bg-violet-500\/10 { background-color: rgba(139, 92, 246, 0.1); }
.bg-sky-500\/10    { background-color: rgba(14, 165, 233, 0.1); }
.bg-purple-500\/10 { background-color: rgba(168, 85, 247, 0.1); }
.bg-green-500\/10  { background-color: rgba(34, 197, 94, 0.1); }
.bg-slate-500\/10  { background-color: rgba(100, 116, 139, 0.1); }

.border-violet-500\/20 { border-color: rgba(139, 92, 246, 0.2); }
.border-sky-500\/20    { border-color: rgba(14, 165, 233, 0.2); }
.border-purple-500\/20 { border-color: rgba(168, 85, 247, 0.2); }
.border-green-500\/20  { border-color: rgba(34, 197, 94, 0.2); }
.border-slate-500\/20  { border-color: rgba(100, 116, 139, 0.2); }

.text-violet-600 { color: #7c3aed; }
.text-sky-600    { color: #0284c7; }
.text-purple-600 { color: #9333ea; }
.text-green-600  { color: #16a34a; }
.text-slate-600  { color: #475569; }

/* Nav color dots */
.bg-violet-500 { background-color: #8b5cf6; }
.bg-sky-500    { background-color: #0ea5e9; }
.bg-purple-500 { background-color: #a855f7; }
.bg-green-500  { background-color: #22c55e; }
.bg-slate-500  { background-color: #64748b; }

/* Brand typeface — ARCH-111. Inter, SIL Open Font License 1.1 (no licensing
 * question: OFL permits embedding, subsetting and redistribution with the
 * product, including commercial use, with no royalty and no source-disclosure
 * obligation — see app/static/vendor/inter-LICENSE.txt).
 *
 * Vendored locally (app/static/vendor/inter-*.woff2, tracked in
 * VENDOR_MANIFEST.txt) — never Google Fonts or any other CDN, per the air-gap
 * gate. Wired here via @font-face + a CSS variable rather than a new Tailwind
 * utility class, because tailwind-output.css is committed pre-built and this
 * repo has no Node toolchain to rebuild it (DESIGN.md / CLAUDE.md); editing
 * tailwind.config.js's fontFamily would be a no-op until the next rebuild.
 * `font-display: swap` plus the system-stack fallback in --font-sans below
 * mean a missing or slow-loading font file never blocks text from painting.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../vendor/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../vendor/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../vendor/inter-700.woff2') format('woff2');
}

:root {
  /* System stack kept as the fallback list — if inter-400.woff2 etc. ever
   * 404 (CDN outage during a rebuild, a bad deploy), the browser falls
   * straight through to the platform default with no layout break. */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  font-family: var(--font-sans);
}
/* text-2xs — the 11px tier the dense data/badge UI relies on, made an on-scale
   token so pages stop reaching for arbitrary text-[Npx]. Enforced by the
   ui-contract gate (arbitrary pixel type is banned; this named utility is not). */
.text-2xs { font-size: 11px; line-height: 1rem; }

/* The logo is drawn from the brand tokens, so it follows the theme. */
.brand-logo-main { fill: hsl(var(--brand)); }
.brand-logo-mid { fill: hsl(var(--brand-mid)); }
.brand-logo-accent { fill: hsl(var(--brand-accent)); }