/* =========================================================================
   GENERATED FILE - DO NOT EDIT.

   Karnova.DesignSystem.Razor: the Razor/CSS implementation adapter for the
   frozen KARNOVA Design Foundation.

   Editing this file makes the adapter a second design authority, which the
   frozen canonical token governance forbids. Change the canonical source
   below and regenerate:

       dotnet run --project eng/Karnova.DesignSystem.Generator

   Generated from, in this order:
     - design-system/tokens/fonts.css
     - design-system/tokens/colors.css
     - design-system/tokens/typography.css
     - design-system/tokens/spacing.css
     - design-system/tokens/borders.css
     - design-system/tokens/elevation.css
     - design-system/tokens/motion.css
     - design-system/tokens/base.css

   Entry point: design-system/styles.css
   Content SHA-256: 517b085f7ede7969f35604c4edd775351a1e64a69021193ace2c25525bc68c14
   ========================================================================= */

/* --- design-system/tokens/fonts.css --- */
/* Karnova brand fonts — supplied by the client, served locally.
   English / Latin: Schibsted Grotesk (variable, wght 400–900 + italic)
   Persian / Dari:  Vazirmatn (variable)
   No webfont CDN is used. IBM Plex has been retired; see readme.md > TYPOGRAPHY. */
@font-face{font-family:"Schibsted Grotesk";src:url("fonts/SchibstedGrotesk-Variable.ttf") format("truetype-variations"),url("fonts/SchibstedGrotesk-Variable.ttf") format("truetype");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("fonts/SchibstedGrotesk-Italic-Variable.ttf") format("truetype-variations"),url("fonts/SchibstedGrotesk-Italic-Variable.ttf") format("truetype");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("fonts/Vazirmatn-Variable.woff2") format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  /* Brand faces */
  --font-core:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-arabic:"Vazirmatn","Schibsted Grotesk",Tahoma,sans-serif;
  --font-display:var(--font-core);
  --font-body:var(--font-core);
  /* Figures: the brand face with tabular numerals — NOT a monospace.
     Apply together with font-variant-numeric:tabular-nums (see .k-data / .k-metric). */
  --font-data:var(--font-core);
  /* Code, API keys, system identifiers only. Never used for money, dates or KPIs. */
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* Persian / Dari: the Arabic face, and slightly looser leading for the script. */
[lang="fa"],[lang="prs"],[lang="ar"],[dir="rtl"]{font-family:var(--font-arabic);--font-core:"Vazirmatn","Schibsted Grotesk",Tahoma,sans-serif;--font-data:"Vazirmatn","Schibsted Grotesk",Tahoma,sans-serif;line-height:1.75}
/* Latin terms embedded in Persian/Dari keep the Latin face and normal leading. */
[dir="rtl"] .k-latin,[lang="fa"] .k-latin,[lang="prs"] .k-latin{font-family:"Schibsted Grotesk",Arial,sans-serif;direction:ltr;unicode-bidi:isolate}

/* --- design-system/tokens/colors.css --- */
:root{
  /* Karnova Ink — primary brand colour. #152A31 / C82 M62 Y50 K42 */
  --ink:#152a31;
  --ink-950:#081115;--ink-900:#0d1d23;--ink-800:#152a31;--ink-700:#1e3a44;
  --ink-600:#2a4f5b;--ink-500:#3d6875;--ink-400:#5f8895;--ink-300:#8fadb7;
  --ink-200:#c0d2d8;--ink-100:#e1eaed;--ink-050:#f1f5f6;
  /* Neutrals — cool, paper-leaning greys */
  --n-000:#ffffff;--n-025:#f8f9f9;--n-050:#f2f4f4;--n-100:#e8eaea;
  --n-200:#d6dad9;--n-300:#b9bebe;--n-400:#8e9595;--n-500:#6b7273;
  --n-600:#4e5455;--n-700:#33383a;--n-900:#16191a;
  /* Signal — the single brand accent. RARE: one decision or required action per surface.
     Fills use signal-500; any Signal-coloured TEXT or icon uses signal-600 (6.1:1 on white).
     Signal is never a semantic status colour and never touches the logo. */
  --signal-600:#a2451a;--signal-500:#c1541f;--signal-100:#f6e4d9;--signal-050:#fdf5f0;
  /* Semantics */
  --green-600:#2e6b4f;--green-500:#3a8261;--green-100:#e1eee7;
  --amber-600:#8f640f;--amber-500:#ab7a1c;--amber-100:#f5ecd8;
  --red-600:#a3342a;--red-500:#c04034;--red-100:#f6e4e1;

  /* ---- semantic aliases ---- */
  --text-1:var(--ink-800);          /* primary copy, headings */
  --text-2:var(--n-600);            /* secondary copy */
  --text-3:var(--n-500);            /* meta, captions, table meta */
  --text-disabled:var(--n-400);
  --text-inverse:var(--n-000);
  --text-inverse-2:var(--ink-200);
  --text-link:var(--ink-800);
  --text-link-hover:var(--ink-600);
  --text-signal:var(--signal-600);

  --surface-page:var(--n-025);
  --surface-card:var(--n-000);
  --surface-sunken:var(--n-050);
  --surface-inset:var(--ink-050);   /* inserted field inside a channel layout */
  --surface-inverse:var(--ink-800);
  --surface-inverse-2:var(--ink-900);
  --surface-hover:var(--n-050);
  --surface-selected:var(--ink-050);

  --border-subtle:var(--n-100);
  --border-default:var(--n-200);
  --border-strong:var(--ink-800);
  --border-inverse:rgba(255,255,255,.18);

  /* the CHANNEL: the structural rule that separates fields */
  --channel-line:var(--n-200);
  --channel-line-inverse:rgba(255,255,255,.16);
  --channel-line-strong:var(--ink-800);

  --action-primary:var(--ink-800);
  --action-primary-hover:var(--ink-900);
  --action-primary-active:var(--ink-950);
  --action-secondary-border:var(--ink-800);
  --action-ghost-hover:var(--n-050);
  --action-disabled:var(--n-100);

  --focus-ring:var(--signal-500);
  --status-positive:var(--green-600);--status-positive-bg:var(--green-100);
  --status-caution:var(--amber-600);--status-caution-bg:var(--amber-100);
  --status-critical:var(--red-600);--status-critical-bg:var(--red-100);
  --status-neutral:var(--n-600);--status-neutral-bg:var(--n-100);
  --status-active:var(--ink-700);--status-active-bg:var(--ink-100);
}
.k-inverse{
  --text-1:var(--n-000);--text-2:var(--ink-200);--text-3:var(--ink-300);
  --surface-card:var(--ink-900);--surface-page:var(--ink-800);--surface-sunken:var(--ink-900);
  --border-subtle:rgba(255,255,255,.12);--border-default:rgba(255,255,255,.18);--border-strong:var(--n-000);
  --channel-line:var(--channel-line-inverse);--text-link:var(--n-000);
}

/* --- design-system/tokens/typography.css --- */
:root{
  /* Type scale — Schibsted Grotesk. Six display/heading steps, three body steps,
     one label, one figure family. Deliberately short; do not add steps. */
  --fs-display-1:60px;
  --lh-display-1:1.04; /* @kind other */
  --fs-display-2:44px;
  --lh-display-2:1.08; /* @kind other */
  --fs-h1:34px;
  --lh-h1:1.14; /* @kind other */
  --fs-h2:27px;
  --lh-h2:1.2; /* @kind other */
  --fs-h3:21px;
  --lh-h3:1.3; /* @kind other */
  --fs-h4:17px;
  --lh-h4:1.4; /* @kind other */
  --fs-h5:15px;
  --lh-h5:1.4; /* @kind other */
  --fs-body-lg:18px;
  --lh-body-lg:1.6; /* @kind other */
  --fs-body:16px;
  --lh-body:1.6; /* @kind other */
  --fs-body-sm:14px;
  --lh-body-sm:1.55; /* @kind other */
  --fs-caption:12.5px;
  --lh-caption:1.45; /* @kind other */
  --fs-label:11px;
  --lh-label:1.2; /* @kind other */
  --fs-data:15px;
  --fs-data-sm:13px;
  --fs-metric:40px;
  --fs-metric-lg:60px;

  /* Weights. Display and headings sit at 500/600 — Schibsted Grotesk at 700 reads shouty. */
  --fw-regular:400; /* @kind other */
  --fw-medium:500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:700; /* @kind other */

  --tr-display:-0.021em; /* @kind other */
  --tr-heading:-0.013em; /* @kind other */
  --tr-body:0em; /* @kind other */
  --tr-label:0.09em; /* @kind other */
  --tr-data:-0.005em; /* @kind other */

  /* Persian/Dari runs 1–2px larger at the same optical size and needs more leading. */
  --fa-size-boost:1.06; /* @kind other */
  --lh-fa-body:1.8; /* @kind other */
  --lh-fa-heading:1.35; /* @kind other */

  --measure-narrow:44ch; /* @kind other */
  --measure:68ch; /* @kind other */
  --measure-wide:82ch; /* @kind other */
}
.k-display-1{font:var(--fw-medium) var(--fs-display-1)/var(--lh-display-1) var(--font-display);letter-spacing:var(--tr-display)}
.k-display-2{font:var(--fw-medium) var(--fs-display-2)/var(--lh-display-2) var(--font-display);letter-spacing:var(--tr-display)}
.k-h1{font:var(--fw-semibold) var(--fs-h1)/var(--lh-h1) var(--font-display);letter-spacing:var(--tr-heading)}
.k-h2{font:var(--fw-semibold) var(--fs-h2)/var(--lh-h2) var(--font-display);letter-spacing:var(--tr-heading)}
.k-h3{font:var(--fw-semibold) var(--fs-h3)/var(--lh-h3) var(--font-display);letter-spacing:-0.008em}
.k-h4{font:var(--fw-semibold) var(--fs-h4)/var(--lh-h4) var(--font-display)}
.k-body-lg{font:var(--fw-regular) var(--fs-body-lg)/var(--lh-body-lg) var(--font-body)}
.k-body{font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body)}
.k-body-sm{font:var(--fw-regular) var(--fs-body-sm)/var(--lh-body-sm) var(--font-body)}
.k-caption{font:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-body);color:var(--text-3)}
.k-label{font:var(--fw-semibold) var(--fs-label)/var(--lh-label) var(--font-body);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-3)}
/* Figures: brand face, tabular, slightly tightened. Money, dates, counts, references. */
.k-data{font:var(--fw-regular) var(--fs-data)/1.45 var(--font-data);letter-spacing:var(--tr-data);font-variant-numeric:tabular-nums}
.k-data-sm{font:var(--fw-regular) var(--fs-data-sm)/1.45 var(--font-data);letter-spacing:var(--tr-data);font-variant-numeric:tabular-nums}
.k-metric{font:var(--fw-medium) var(--fs-metric)/1 var(--font-data);letter-spacing:-0.024em;font-variant-numeric:tabular-nums;color:var(--text-1)}
/* Code and system identifiers only. */
.k-code{font:var(--fw-regular) 13px/1.5 var(--font-mono);letter-spacing:0}
/* Persian / Dari overrides — same hierarchy, script-appropriate metrics. */
[dir="rtl"] .k-display-1,[lang="fa"] .k-display-1,[lang="prs"] .k-display-1{line-height:1.25;letter-spacing:0;font-weight:var(--fw-medium)}
[dir="rtl"] .k-display-2,[lang="fa"] .k-display-2,[lang="prs"] .k-display-2{line-height:1.3;letter-spacing:0}
[dir="rtl"] .k-h1,[dir="rtl"] .k-h2,[dir="rtl"] .k-h3,[dir="rtl"] .k-h4,[lang="fa"] .k-h1,[lang="fa"] .k-h2,[lang="fa"] .k-h3,[lang="prs"] .k-h1,[lang="prs"] .k-h2{line-height:var(--lh-fa-heading);letter-spacing:0}
[dir="rtl"] .k-body,[dir="rtl"] .k-body-lg,[lang="fa"] .k-body,[lang="fa"] .k-body-lg{line-height:var(--lh-fa-body)}
[dir="rtl"] .k-body-sm,[lang="fa"] .k-body-sm{line-height:1.7}
/* Uppercase tracking does not apply to Arabic script — labels stay as set. */
[dir="rtl"] .k-label,[lang="fa"] .k-label,[lang="prs"] .k-label{letter-spacing:0;text-transform:none;font-weight:var(--fw-semibold)}
/* Figures stay Latin and LTR inside RTL text so columns of numbers remain comparable. */
[dir="rtl"] .k-data,[dir="rtl"] .k-data-sm,[dir="rtl"] .k-metric{direction:ltr;unicode-bidi:isolate;font-family:"Schibsted Grotesk",Vazirmatn,Arial,sans-serif}

/* --- design-system/tokens/spacing.css --- */
:root{
  --s-0:0px;--s-1:2px;--s-2:4px;--s-3:8px;--s-4:12px;--s-5:16px;--s-6:20px;
  --s-7:24px;--s-8:32px;--s-9:40px;--s-10:56px;--s-11:72px;--s-12:96px;--s-13:128px;

  /* CHANNEL system — structured fields separated by consistent channels */
  --channel-w:1px;              /* hairline channel */
  --channel-w-strong:2px;
  --channel-gap-sm:16px;        /* between fields inside a block */
  --channel-gap:24px;           /* default channel between fields */
  --channel-gap-lg:40px;        /* between blocks */
  --channel-inset:20px;         /* padding inside a field */
  --channel-inset-lg:32px;

  --page-max:1280px;
  --page-gutter:32px;
  --page-gutter-sm:20px;
  --section-y:96px;
  --section-y-sm:56px;
  --grid-cols:12; /* @kind other */

  --control-h-sm:28px;--control-h:36px;--control-h-lg:44px;
  --tap-min:44px;
}

/* --- design-system/tokens/borders.css --- */
:root{
  --r-0:0px;      /* default: Karnova is square */
  --r-1:2px;      /* controls, inputs, buttons */
  --r-2:3px;      /* cards, panels */
  --r-pill:999px; /* status dots and pills only */
  --bw-1:1px;--bw-2:2px;
  --border-hairline:var(--bw-1) solid var(--border-subtle);
  --border-field:var(--bw-1) solid var(--border-default);
  --border-emphasis:var(--bw-1) solid var(--border-strong);
  --rule-accent:var(--bw-2) solid var(--ink-800);
}

/* --- design-system/tokens/elevation.css --- */
:root{
  --shadow-0:none;
  --shadow-1:0 1px 2px rgba(21,42,49,.06);
  --shadow-2:0 6px 18px -8px rgba(21,42,49,.18);
  --shadow-overlay:0 24px 64px -20px rgba(8,17,21,.32);
  --shadow-focus:0 0 0 2px var(--n-000),0 0 0 4px var(--focus-ring);
  --scrim:rgba(8,17,21,.44);
  --blur-scrim:blur(2px); /* @kind other */
}

/* --- design-system/tokens/motion.css --- */
:root{
  --dur-1:120ms; /* @kind other */
  --dur-2:180ms; /* @kind other */
  --dur-3:260ms; /* @kind other */
  --dur-4:420ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
  --transition-control:background-color var(--dur-1) var(--ease-standard),border-color var(--dur-1) var(--ease-standard),color var(--dur-1) var(--ease-standard); /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{--dur-1:0ms; /* @kind other */ --dur-2:0ms; /* @kind other */ --dur-3:0ms; /* @kind other */ --dur-4:0ms; /* @kind other */}}

/* --- design-system/tokens/base.css --- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-1);font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,h5{margin:0;font-family:var(--font-display);font-weight:var(--fw-semibold);letter-spacing:var(--tr-heading);color:var(--text-1)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--ink-200);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--ink-600)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--ink-100)}
/* ---- RTL / Persian-Dari structural mirroring ----
   The whole system mirrors from `dir="rtl"`; no separate RTL stylesheet exists. */
[dir="rtl"]{text-align:right}
[dir="rtl"] .k-channelfield--decision{box-shadow:inset -2px 0 0 var(--ink-800)}
[dir="rtl"] .k-card--channel{border-left:0;border-right:var(--bw-2) solid var(--ink-800)}
[dir="rtl"] .k-sidenav__item{border-left:0;border-right:var(--bw-2) solid transparent}
[dir="rtl"] .k-sidenav__item--active{border-right-color:var(--ink-800)}
[dir="rtl"] .k-sidenav__count{margin-left:0;margin-right:auto}
[dir="rtl"] .k-toast{border-left:0;border-right:var(--bw-2) solid #fff}
[dir="rtl"] .k-toast__x{margin-left:0;margin-right:auto}
[dir="rtl"] .k-inputwrap>.k-inputwrap__lead{left:auto;right:var(--s-4)}
[dir="rtl"] .k-inputwrap>.k-inputwrap__lead~.k-input{padding-left:var(--s-4);padding-right:38px}
[dir="rtl"] .k-inputwrap__trail{right:auto;left:var(--s-4)}
[dir="rtl"] .k-select{padding:0 var(--s-4) 0 34px}
[dir="rtl"] .k-select__chev{right:auto;left:var(--s-4)}
[dir="rtl"] .k-switch input:checked+.k-switch__track::after{transform:translateX(-16px)}
[dir="rtl"] .k-switch__track::after{left:auto;right:2px}
[dir="rtl"] .k-table th,[dir="rtl"] .k-table td{text-align:right}
[dir="rtl"] .k-table__num{direction:ltr;text-align:left}
[dir="rtl"] .k-prog__fill{inset:0 0 0 auto}
[dir="rtl"] .k-tab--active::after{left:0;right:0}
[dir="rtl"] .k-dialog__foot{justify-content:flex-start}
/* The channel: a structured field grid separated by hairline rules. */
.k-channel-row{display:grid;gap:var(--channel-w);background:var(--channel-line)}
.k-channel-row>*{background:var(--surface-card);padding:var(--channel-inset)}