/* GENERATED by tools/build-css.php from assets/ds/ — do not edit.
   Rebuild with: php tools/build-css.php */

/* ── ds/tokens/colors.css ── */
/* ─────────────────────────────────────────────────────────────────────────────
   Arc is a layer inside Zunu. Zunu owns surfaces, neutrals and status colour;
   Arc adds three colours, one gradient and the surfaces that carry it.
   Source: zunu-brand-kit.pdf v1.0 and arc-brand-kit v1.0 (assets/arc/arc-tokens.css).
   ───────────────────────────────────────────────────────────────────────────── */
:root{
  /* ── Zunu core ─────────────────────────────────────────────── */
  --zunu-ink:#000720;        /* backgrounds, wordmark on light */
  --zunu-deep:#00285B;       /* headers, sidebars, rules */
  --zunu-blue:#0056A2;       /* links, buttons, focus */
  --zunu-signal:#00A8E8;     /* live state, charts, highlights */
  --zunu-cyan:#05D4F2;       /* gradient ends and glow */

  /* ── Zunu surface ──────────────────────────────────────────── */
  --zunu-white:#FFFFFF;      /* cards, tables, inputs */
  --zunu-mist:#F4F7FB;       /* page ground, zebra rows */
  --zunu-silver:#DCE3EC;     /* borders, dividers, disabled */
  --zunu-steel:#8A99AD;      /* secondary text, placeholders */
  --zunu-graphite:#1B2637;   /* body text on light */

  /* ── Zunu accent + status (Arc does not define status colour) ─ */
  --zunu-electric:#1257E5;   /* secondary action, emphasis */
  --zunu-violet:#D0A5F5;     /* the intelligence layer, in Zunu's own palette */
  --zunu-posted:#0FA97A;     /* approved, reconciled */
  --zunu-pending:#E0A106;    /* draft, awaiting approval */
  --zunu-blocked:#DC3A3A;    /* rejected, failed, over budget */
  --zunu-info:#0392CA;       /* advisory, Arc suggestion */

  /* ── Arc: owned ────────────────────────────────────────────── */
  --arc-blue:#0080FF;        /* Beam origin, icons, active state */
  --arc-violet:#6420F2;      /* Beam end, depth, dark surfaces */
  --arc-ink:#081025;         /* the R and C — standalone artwork only */

  /* ── Arc: derived ──────────────────────────────────────────── */
  --arc-wash:#F3F4FF;        /* Arc panel ground on light */
  --arc-line:#D6DCFE;        /* Arc panel border, inline rules */
  --arc-night:#06103A;       /* Arc panel ground on dark */

  /* ── The Beam. The one gradient that means Arc. Top to bottom,
        blue to violet. Never reversed, rotated or tinted. ─────── */
  --arc-beam:linear-gradient(180deg,#0080FF 0%,#6420F2 100%); /* @kind color */

  /* ─────── Zunu, the platform Arc lives in. Used ONLY for the "Log in with Zunu"
     SSO affordance and Zunu attribution — never as an Arc accent. ─────── */
  --zunu-blue:#0056A2;
  --zunu-blue-dark:#00437F;
  --zunu-cyan:#05D4F2;
  --gradient-brand:var(--arc-beam); /* @kind color */
  --gradient-brand-diagonal:linear-gradient(135deg,#0080FF 0%,#6420F2 100%); /* @kind color */
  --gradient-brand-horizontal:linear-gradient(90deg,#0080FF 0%,#6420F2 100%); /* @kind color */
  --gradient-agent-halo:radial-gradient(120% 120% at 50% 0%,rgba(0,128,255,.18) 0%,rgba(100,32,242,.10) 45%,rgba(100,32,242,0) 75%); /* @kind color */
  --gradient-inverse-veil:linear-gradient(180deg,rgba(0,7,32,0) 0%,rgba(0,7,32,.86) 100%); /* @kind color */
  /* Zunu's own surface gradient. Where both could appear, Beam wins. */
  --zunu-aurora:linear-gradient(135deg,#00285B 0%,#00A8E8 62%,#05D4F2 100%); /* @kind color */

  /* ── Arc geometry (from the kit) ───────────────────────────── */
  --arc-leg-angle:61.2deg; /* @kind other */
  --arc-ratio:1.5428; /* @kind other */
  --arc-clear-space:0.237; /* @kind other */
  --arc-radius-icon:22.37%; /* @kind other */
  --zunu-fold-angle:38.2deg; /* @kind other */

  /* ── Interface ramps, derived from the brand values above ────
        Anchors are exact kit colours; intermediate steps are tints
        and shades of those anchors, never new hues. ───────────── */
  --blue-50:#EAF2FA;--blue-100:#D0E2F2;--blue-200:#A2C5E5;--blue-300:#6A9ED2;--blue-400:#2E77BE;
  --blue-500:#0056A2;--blue-600:#004A8C;--blue-700:#003D74;--blue-800:#00305C;--blue-900:#002344;--blue-950:#00152A;

  --indigo-50:#EAF2FA;--indigo-100:#D0E2F2;--indigo-200:#A2C5E5;--indigo-300:#6A9ED2;--indigo-400:#1257E5;
  --indigo-500:#0056A2;--indigo-600:#004A8C;--indigo-700:#003D74;--indigo-800:#00305C;--indigo-900:#002344;--indigo-950:#00152A;

  --violet-50:#F3F4FF;--violet-100:#E4E1FD;--violet-200:#D0A5F5;--violet-300:#B184F5;
  --violet-400:#8A50F4;--violet-500:#6420F2;--violet-600:#5417CE;--violet-700:#4312A8;
  --violet-800:#340E82;--violet-900:#250A5D;--violet-950:#150638;

  --neutral-0:#FFFFFF;--neutral-25:#FAFCFE;--neutral-50:#F4F7FB;--neutral-100:#EAEFF6;--neutral-200:#DCE3EC;
  --neutral-300:#C0CBD9;--neutral-400:#8A99AD;--neutral-500:#6A7A90;--neutral-600:#4D5C73;
  --neutral-700:#33415A;--neutral-800:#1B2637;--neutral-900:#0A1231;--neutral-950:#000720;

  --green-50:#E7F7F1;--green-100:#C4EADB;--green-500:#0FA97A;--green-600:#0C8A63;--green-700:#096B4D;--green-900:#04331F;
  --amber-50:#FDF4E2;--amber-100:#F9E4BB;--amber-500:#E0A106;--amber-600:#B88305;--amber-700:#8A6204;--amber-900:#4A3402;
  --red-50:#FDECEC;--red-100:#F8D3D3;--red-500:#DC3A3A;--red-600:#C02A2A;--red-700:#9A2020;--red-900:#4E1010;
  --teal-50:#E3F6FD;--teal-500:#00A8E8;--teal-700:#0170A0;

  /* ── Semantic: surfaces ────────────────────────────────────── */
  --surface-page:var(--zunu-mist);
  --surface-card:var(--zunu-white);
  --surface-sunken:var(--neutral-100);
  --surface-raised:var(--zunu-white);
  --surface-hover:var(--neutral-100);
  --surface-active:var(--zunu-silver);
  --surface-selected:var(--blue-50);
  --surface-disabled:var(--neutral-100);
  --surface-inverse:var(--zunu-ink);
  --surface-inverse-hover:var(--neutral-900);
  --surface-brand:var(--zunu-blue);
  --surface-brand-hover:var(--blue-600);
  --surface-brand-active:var(--blue-700);
  --surface-brand-subtle:var(--blue-50);
  --surface-overlay:rgba(0,7,32,.48);
  --surface-glass:rgba(255,255,255,.72);
  /* Arc's own surfaces inside a Zunu page */
  --surface-arc:var(--arc-wash);
  --surface-arc-border:var(--arc-line);
  --surface-arc-inverse:var(--arc-night);

  /* ── Semantic: text ────────────────────────────────────────── */
  --text-primary:var(--zunu-graphite);
  --text-secondary:var(--neutral-600);
  --text-tertiary:var(--neutral-500);
  --text-placeholder:var(--zunu-steel);
  --text-disabled:var(--zunu-steel);
  --text-inverse:var(--zunu-white);
  --text-inverse-secondary:var(--zunu-steel);
  --text-heading:var(--zunu-ink);
  --text-brand:var(--zunu-blue);
  --text-on-brand:var(--zunu-white);
  --text-link:var(--zunu-blue);
  --text-link-hover:var(--blue-700);
  --text-arc:var(--arc-violet);
  --text-success:var(--green-700);
  --text-warning:var(--amber-700);
  --text-danger:var(--red-600);

  /* ── Semantic: borders ─────────────────────────────────────── */
  --border-subtle:var(--neutral-100);
  --border-default:var(--zunu-silver);
  --border-strong:var(--neutral-300);
  --border-inverse:rgba(255,255,255,.12);
  --border-brand:var(--zunu-blue);
  --border-focus:var(--zunu-blue);
  --border-arc:var(--arc-line);

  /* ── Semantic: status. Zunu's four, unchanged. Always paired
        with a label — never colour alone. ───────────────────── */
  --status-success-bg:var(--green-50);--status-success-border:var(--green-100);--status-success-fg:var(--green-700);--status-success-solid:var(--zunu-posted);
  --status-warning-bg:var(--amber-50);--status-warning-border:var(--amber-100);--status-warning-fg:var(--amber-700);--status-warning-solid:var(--zunu-pending);
  --status-danger-bg:var(--red-50);--status-danger-border:var(--red-100);--status-danger-fg:var(--red-700);--status-danger-solid:var(--zunu-blocked);
  --status-info-bg:#E4F4FB;--status-info-border:#BFE4F4;--status-info-fg:#026287;--status-info-solid:var(--zunu-info);
  --status-neutral-bg:var(--neutral-100);--status-neutral-border:var(--zunu-silver);--status-neutral-fg:var(--neutral-600);--status-neutral-solid:var(--zunu-steel);

  /* ── Data visualisation ────────────────────────────────────── */
  --chart-1:#0056A2;--chart-2:#00A8E8;--chart-3:#05D4F2;--chart-4:#1257E5;
  --chart-5:#E0A106;--chart-6:#DC3A3A;--chart-7:#0FA97A;--chart-8:#8A99AD;
  --chart-grid:var(--zunu-silver);--chart-axis:var(--zunu-steel);
}

/* Inverse scope: Zunu Ink chrome. Arc panels on dark use --arc-night. */
.arc-inverse{
  --surface-page:var(--zunu-ink);
  --surface-card:#071030;
  --surface-sunken:#00050F;
  --surface-hover:rgba(255,255,255,.06);
  --surface-active:rgba(255,255,255,.10);
  --surface-selected:rgba(0,128,255,.18);
  --surface-brand-subtle:rgba(0,128,255,.14);
  --surface-arc:var(--arc-night);
  --text-primary:var(--zunu-white);
  --text-heading:var(--zunu-white);
  --text-secondary:#9FB0C6;
  --text-tertiary:var(--zunu-steel);
  --text-brand:var(--arc-blue);
  --text-link:var(--arc-blue);
  --text-link-hover:#4DA5FF;
  --border-subtle:rgba(255,255,255,.07);
  --border-default:rgba(255,255,255,.12);
  --border-strong:rgba(255,255,255,.20);
}

/* ── ds/tokens/typography.css ── */
/* Geist for interface, Geist Mono for every figure, IBM Plex Sans Arabic for RTL.
   Inherited from Zunu at the Zunu scale — Arc adds no typeface of its own. */
:root{
  --font-sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-arabic:"IBM Plex Sans Arabic","Geist",sans-serif;
  /* Zunu's wordmark only. Never for Arc UI text. */
  --font-zunu:"Comfortaa","Geist",sans-serif;

  --text-2xs:11px;--text-xs:12px;--text-sm:13px;--text-base:14px;--text-md:15px;--text-lg:17px;
  --text-xl:20px;--text-2xl:24px;--text-3xl:30px;--text-4xl:38px;--text-5xl:48px;--text-6xl:60px;--text-7xl:76px;

  --leading-none:1;--leading-tight:1.15;--leading-snug:1.3;--leading-normal:1.5;--leading-relaxed:1.65;

  --tracking-tighter:-0.03em;--tracking-tight:-0.018em;--tracking-normal:0;
  --tracking-wide:0.02em;--tracking-wider:0.06em;--tracking-widest:0.12em;

  --weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;

  --type-hero:var(--weight-medium) var(--text-6xl)/var(--leading-none) var(--font-display);
  --type-display:var(--weight-medium) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --type-title:var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-display);
  --type-heading:var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-sans);
  --type-subheading:var(--weight-semibold) var(--text-base)/var(--leading-snug) var(--font-sans);
  --type-body:var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-sans);
  --type-body-sm:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --type-label:var(--weight-medium) var(--text-sm)/var(--leading-snug) var(--font-sans);
  --type-caption:var(--weight-regular) var(--text-xs)/var(--leading-snug) var(--font-sans);
  --type-eyebrow:var(--weight-semibold) var(--text-2xs)/var(--leading-snug) var(--font-sans);
  --type-mono:var(--weight-regular) var(--text-sm)/var(--leading-snug) var(--font-mono);
  --type-metric:var(--weight-medium) var(--text-3xl)/var(--leading-none) var(--font-mono);
}
.arc-tabular,table,.arc-metric{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
[dir="rtl"]{font-family:var(--font-arabic)}
/* The Zunu wordmark is always set in Comfortaa, all caps, wherever it appears in text. */
.zunu-wordmark{font-family:var(--font-zunu);text-transform:uppercase;font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide)}

/* ── ds/tokens/spacing.css ── */
/* 4px base grid. Arc's dense surfaces live on 4/8/12; marketing lives on 24/48/96. */
:root{
  --space-0:0px;--space-px:1px;--space-0-5:2px;--space-1:4px;--space-1-5:6px;--space-2:8px;--space-2-5:10px;
  --space-3:12px;--space-3-5:14px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--space-10:40px;
  --space-12:48px;--space-14:56px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;--space-40:160px;

  /* Layout constants */
  --rail-width:56px;
  --sidebar-width:264px;
  --sidebar-width-collapsed:56px;
  --topbar-height:52px;
  --context-panel-width:360px;
  --composer-max-width:760px;
  --content-max-width:1180px;
  --prose-max-width:68ch;
  --row-height-sm:32px;--row-height:40px;--row-height-lg:48px;
  --control-height-sm:28px;--control-height:34px;--control-height-lg:42px;

  --z-base:0; /* @kind other */
  --z-sticky:100; /* @kind other */
  --z-dropdown:400; /* @kind other */
  --z-overlay:800; /* @kind other */
  --z-modal:900; /* @kind other */
  --z-toast:1000; /* @kind other */
  --z-tooltip:1100; /* @kind other */
}

/* ── ds/tokens/shape.css ── */
/* Arc radii echo the logo: a tight, even curve. Nothing is fully pill except status chips. */
:root{
  --radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:20px;--radius-3xl:28px;--radius-full:999px;

  --border-width:1px; /* @kind other */
  --border-width-thick:1.5px; /* @kind other */
  --border-width-heavy:2px; /* @kind other */
  --focus-ring-width:2px; /* @kind other */
  --focus-ring-offset:2px; /* @kind other */
}

/* ── ds/tokens/elevation.css ── */
/* Shadows are cast in Zunu Ink (#000720), never in pure black. */
:root{
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(0,7,32,.06);
  --shadow-sm:0 1px 2px rgba(0,7,32,.05),0 2px 6px -1px rgba(0,7,32,.06);
  --shadow-md:0 2px 4px -1px rgba(0,7,32,.05),0 8px 20px -6px rgba(0,7,32,.10);
  --shadow-lg:0 4px 8px -2px rgba(0,7,32,.06),0 20px 40px -12px rgba(0,7,32,.16);
  --shadow-xl:0 8px 16px -4px rgba(0,7,32,.08),0 32px 64px -16px rgba(0,7,32,.22);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.55);
  --shadow-brand:0 6px 20px -6px rgba(0,128,255,.40);
  --shadow-focus:0 0 0 3px rgba(0,86,162,.26);
  --shadow-focus-danger:0 0 0 3px rgba(220,58,58,.24);
  --blur-glass:saturate(180%) blur(20px); /* @kind other */
}

/* ── ds/tokens/motion.css ── */
/* Arc moves like an instrument: quick, damped, no bounce on anything that carries data. */
:root{
  --duration-instant:80ms; /* @kind other */
  --duration-fast:120ms; /* @kind other */
  --duration-base:180ms; /* @kind other */
  --duration-slow:280ms; /* @kind other */
  --duration-slower:480ms; /* @kind other */
  --duration-ambient:2400ms; /* @kind other */
  --ease-out:cubic-bezier(.2,.8,.25,1); /* @kind other */
  --ease-in:cubic-bezier(.5,0,.9,.4); /* @kind other */
  --ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */
  --ease-emphasis:cubic-bezier(.32,.72,0,1); /* @kind other */
  --transition-control:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out); /* @kind other */
}
@keyframes arc-fade-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes arc-fade-in{from{opacity:0}to{opacity:1}}
@keyframes arc-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes arc-sweep{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes arc-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ── ds/tokens/base.css ── */
/* Minimal element defaults. Consumers get sane text + link colors for free. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--type-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-display);color:var(--text-heading);letter-spacing:var(--tracking-tight)}
h1{font:var(--type-display)}h2{font:var(--type-title)}h3{font:var(--type-heading)}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:var(--focus-ring-width) solid var(--border-focus);outline-offset:var(--focus-ring-offset)}
code,kbd,pre,samp{font-family:var(--font-mono)}
hr{border:0;border-top:var(--border-width) solid var(--border-default);margin:var(--space-6) 0}
::selection{background:var(--blue-100);color:var(--blue-900)}

/* ── ds/components/core.css ── */
.arc-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:var(--border-width) solid transparent;border-radius:var(--radius-sm);font-family:var(--font-sans);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);cursor:pointer;white-space:nowrap;text-decoration:none;transition:var(--transition-control),transform var(--duration-fast) var(--ease-out);position:relative}
.arc-btn:hover{text-decoration:none}
.arc-btn:active{transform:translateY(.5px)}
.arc-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.arc-btn[disabled],.arc-btn[aria-disabled=true]{cursor:not-allowed;opacity:.45;transform:none}
.arc-btn--sm{height:var(--control-height-sm);padding:0 var(--space-2-5);font-size:var(--text-xs)}
.arc-btn--md{height:var(--control-height);padding:0 var(--space-3-5,14px);font-size:var(--text-sm)}
.arc-btn--lg{height:var(--control-height-lg);padding:0 var(--space-5);font-size:var(--text-base);border-radius:var(--radius-md)}
.arc-btn--block{width:100%}
.arc-btn--primary{background:var(--surface-brand);color:var(--text-on-brand);box-shadow:var(--shadow-xs)}
.arc-btn--primary:hover{background:var(--surface-brand-hover)}
.arc-btn--primary:active{background:var(--surface-brand-active)}
.arc-btn--brand{background:var(--gradient-brand-diagonal);color:var(--text-on-brand);box-shadow:var(--shadow-brand);background-size:140% 140%;background-position:0% 0%;transition:background-position var(--duration-slow) var(--ease-out),box-shadow var(--duration-base) var(--ease-out)}
.arc-btn--brand:hover{background-position:100% 100%}
.arc-btn--secondary{background:var(--surface-card);color:var(--text-primary);border-color:var(--border-default);box-shadow:var(--shadow-xs)}
.arc-btn--secondary:hover{background:var(--surface-hover);border-color:var(--border-strong)}
.arc-btn--secondary:active{background:var(--surface-active)}
.arc-btn--ghost{background:transparent;color:var(--text-secondary)}
.arc-btn--ghost:hover{background:var(--surface-hover);color:var(--text-primary)}
.arc-btn--danger{background:var(--status-danger-solid);color:#fff}
.arc-btn--danger:hover{background:var(--red-600)}
.arc-btn--danger:focus-visible{box-shadow:var(--shadow-focus-danger)}
.arc-btn--inverse{background:rgba(255,255,255,.10);color:var(--neutral-0);border-color:rgba(255,255,255,.14)}
.arc-btn--inverse:hover{background:rgba(255,255,255,.16)}
/* Zunu SSO — carries Zunu's own mark, so the surface stays neutral in both themes:
   the mark's navy-to-cyan gradient needs a light ground to read. */
.arc-btn--zunu{background:var(--neutral-0);color:var(--neutral-950);border-color:var(--neutral-200);box-shadow:var(--shadow-sm)}
.arc-btn--zunu:hover{background:var(--neutral-50);border-color:var(--neutral-300)}
.arc-btn--zunu:focus-visible{box-shadow:0 0 0 3px rgba(0,86,162,.28)}
.arc-btn__spinner{width:13px;height:13px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:var(--radius-full);animation:arc-spin var(--duration-slower) linear infinite;opacity:.9}

.arc-iconbtn{display:inline-flex;align-items:center;justify-content:center;border:var(--border-width) solid transparent;background:transparent;color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-control)}
.arc-iconbtn:hover{background:var(--surface-hover);color:var(--text-primary)}
.arc-iconbtn:active{background:var(--surface-active)}
.arc-iconbtn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.arc-iconbtn[disabled]{opacity:.4;cursor:not-allowed}
.arc-iconbtn--sm{width:26px;height:26px}.arc-iconbtn--md{width:32px;height:32px}.arc-iconbtn--lg{width:38px;height:38px;border-radius:var(--radius-md)}
.arc-iconbtn--outline{border-color:var(--border-default);background:var(--surface-card)}
.arc-iconbtn--solid{background:var(--surface-brand);color:var(--text-on-brand)}
.arc-iconbtn--solid:hover{background:var(--surface-brand-hover);color:var(--text-on-brand)}
.arc-iconbtn--active{background:var(--surface-selected);color:var(--text-brand)}

.arc-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:0}
.arc-icon svg{display:block}

.arc-badge{display:inline-flex;align-items:center;gap:var(--space-1);height:20px;padding:0 var(--space-2);border-radius:var(--radius-full);font-family:var(--font-sans);font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);border:var(--border-width) solid transparent;white-space:nowrap}
.arc-badge--neutral{background:var(--status-neutral-bg);color:var(--status-neutral-fg);border-color:var(--status-neutral-border)}
.arc-badge--success{background:var(--status-success-bg);color:var(--status-success-fg);border-color:var(--status-success-border)}
.arc-badge--warning{background:var(--status-warning-bg);color:var(--status-warning-fg);border-color:var(--status-warning-border)}
.arc-badge--danger{background:var(--status-danger-bg);color:var(--status-danger-fg);border-color:var(--status-danger-border)}
.arc-badge--info{background:var(--status-info-bg);color:var(--status-info-fg);border-color:var(--status-info-border)}
.arc-badge--brand{background:var(--surface-brand-subtle);color:var(--text-brand);border-color:var(--indigo-100)}
.arc-badge--solid{background:var(--surface-inverse);color:var(--text-inverse);border-color:transparent}
.arc-badge__dot{width:5px;height:5px;border-radius:var(--radius-full);background:currentColor;flex:none}

.arc-tag{display:inline-flex;align-items:center;white-space:nowrap;gap:var(--space-1-5);height:24px;padding:0 var(--space-2);border-radius:var(--radius-xs);background:var(--surface-card);border:var(--border-width) solid var(--border-default);color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-medium);transition:var(--transition-control)}
.arc-tag--interactive{cursor:pointer}
.arc-tag--interactive:hover{border-color:var(--border-strong);color:var(--text-primary);background:var(--surface-hover)}
.arc-tag--selected{background:var(--surface-selected);border-color:var(--indigo-200);color:var(--text-brand)}
.arc-tag--mono{font-family:var(--font-mono);font-size:var(--text-2xs)}
.arc-tag__remove{display:inline-flex;margin-right:-2px;border:0;background:none;padding:0;color:inherit;opacity:.6;cursor:pointer}
.arc-tag__remove:hover{opacity:1}

.arc-card{min-width:0;background:var(--surface-card);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-lg);position:relative}
.arc-card--flat{box-shadow:none}
.arc-card--raised{box-shadow:var(--shadow-sm)}
.arc-card--floating{box-shadow:var(--shadow-lg);border-color:var(--border-subtle)}
.arc-card--sunken{background:var(--surface-sunken);border-color:transparent}
.arc-card--interactive{cursor:pointer;transition:box-shadow var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}
.arc-card--interactive:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.arc-card--interactive:active{transform:translateY(1px)}
.arc-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4) var(--space-4) 0}
.arc-card__title{font:var(--type-subheading);color:var(--text-primary);letter-spacing:var(--tracking-tight)}
.arc-card__subtitle{font:var(--type-caption);color:var(--text-tertiary);margin-top:2px}
.arc-card__body{padding:var(--space-4)}
.arc-card__footer{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:var(--border-width) solid var(--border-subtle)}

/* ── ds/components/forms.css ── */
.arc-field{display:flex;flex-direction:column;gap:var(--space-1-5)}
.arc-field__label{font:var(--type-label);color:var(--text-primary);display:flex;align-items:center;gap:var(--space-1-5)}
.arc-field__optional{font:var(--type-caption);color:var(--text-tertiary);font-weight:var(--weight-regular)}
.arc-field__hint{font:var(--type-caption);color:var(--text-tertiary)}
.arc-field__error{font:var(--type-caption);color:var(--text-danger);display:flex;align-items:center;gap:var(--space-1)}

.arc-input{display:flex;align-items:center;gap:var(--space-2);height:var(--control-height);padding:0 var(--space-2-5);background:var(--surface-card);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-primary);transition:var(--transition-control)}
.arc-input:hover{border-color:var(--border-strong)}
.arc-input--focused{border-color:var(--border-focus);box-shadow:var(--shadow-focus)}
.arc-input--invalid{border-color:var(--status-danger-solid)}
.arc-input--invalid.arc-input--focused{box-shadow:var(--shadow-focus-danger)}
.arc-input--disabled{background:var(--surface-disabled);color:var(--text-disabled);cursor:not-allowed}
.arc-input--sm{height:var(--control-height-sm);padding:0 var(--space-2)}
.arc-input--lg{height:var(--control-height-lg);padding:0 var(--space-3);border-radius:var(--radius-md)}
.arc-input--mono .arc-input__control{font-family:var(--font-mono)}
.arc-input__control{flex:1;min-width:0;border:0;background:none;outline:none;color:inherit;font-family:var(--font-sans);font-size:var(--text-sm);height:100%}
.arc-input__control::placeholder{color:var(--text-placeholder)}
.arc-input__affix{color:var(--text-tertiary);font-size:var(--text-xs);flex:none;display:flex;align-items:center}

.arc-textarea{width:100%;padding:var(--space-2-5);background:var(--surface-card);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-normal);resize:vertical;transition:var(--transition-control)}
.arc-textarea:hover{border-color:var(--border-strong)}
.arc-textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--shadow-focus)}
.arc-textarea::placeholder{color:var(--text-placeholder)}
.arc-textarea:disabled{background:var(--surface-disabled);color:var(--text-disabled)}

.arc-select{position:relative;display:flex;align-items:center}
.arc-select__control{appearance:none;width:100%;height:var(--control-height);padding:0 var(--space-8) 0 var(--space-2-5);background:var(--surface-card);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-sm);cursor:pointer;transition:var(--transition-control)}
.arc-select__control:hover{border-color:var(--border-strong)}
.arc-select__control:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--shadow-focus)}
.arc-select__control:disabled{background:var(--surface-disabled);color:var(--text-disabled);cursor:not-allowed}
.arc-select--sm .arc-select__control{height:var(--control-height-sm);font-size:var(--text-xs);padding-right:var(--space-7)}
.arc-select__chevron{position:absolute;right:var(--space-2-5);pointer-events:none;color:var(--text-tertiary)}

.arc-check{display:inline-flex;align-items:flex-start;gap:var(--space-2);cursor:pointer;font:var(--type-body-sm);color:var(--text-primary)}
.arc-check--disabled{cursor:not-allowed;color:var(--text-disabled)}
.arc-check__box{width:16px;height:16px;flex:none;margin-top:1px;border:var(--border-width-thick) solid var(--border-strong);border-radius:var(--radius-xs);background:var(--surface-card);display:flex;align-items:center;justify-content:center;color:#fff;transition:var(--transition-control)}
.arc-check:hover .arc-check__box{border-color:var(--indigo-400)}
.arc-check__box--on{background:var(--surface-brand);border-color:var(--surface-brand)}
.arc-check__box--radio{border-radius:var(--radius-full)}
.arc-check input{position:absolute;opacity:0;width:0;height:0}
.arc-check input:focus-visible+.arc-check__box{box-shadow:var(--shadow-focus)}
.arc-check__dot{width:6px;height:6px;border-radius:var(--radius-full);background:#fff}
.arc-check__desc{display:block;font:var(--type-caption);color:var(--text-tertiary);margin-top:2px}

.arc-switch{display:inline-flex;align-items:center;gap:var(--space-2-5);cursor:pointer;font:var(--type-body-sm);color:var(--text-primary)}
.arc-switch input{position:absolute;opacity:0;width:0;height:0}
.arc-switch__track{width:34px;height:20px;flex:none;border-radius:var(--radius-full);background:var(--neutral-300);padding:2px;transition:background-color var(--duration-base) var(--ease-out)}
.arc-switch__track--on{background:var(--surface-brand)}
.arc-switch input:focus-visible+.arc-switch__track{box-shadow:var(--shadow-focus)}
.arc-switch__thumb{width:16px;height:16px;border-radius:var(--radius-full);background:#fff;box-shadow:var(--shadow-xs);transform:translateX(0);transition:transform var(--duration-base) var(--ease-emphasis)}
.arc-switch__track--on .arc-switch__thumb{transform:translateX(14px)}
.arc-switch--sm .arc-switch__track{width:28px;height:16px}
.arc-switch--sm .arc-switch__thumb{width:12px;height:12px}
.arc-switch--sm .arc-switch__track--on .arc-switch__thumb{transform:translateX(12px)}
.arc-switch--disabled{opacity:.5;cursor:not-allowed}

/* ── ds/components/navigation.css ── */
.arc-tabs{display:flex;align-items:center;gap:var(--space-1);border-bottom:var(--border-width) solid var(--border-default)}
.arc-tabs__tab{position:relative;display:inline-flex;align-items:center;gap:var(--space-1-5);height:36px;padding:0 var(--space-2-5);border:0;background:none;color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;transition:var(--transition-control)}
.arc-tabs__tab:hover{color:var(--text-primary)}
.arc-tabs__tab:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-xs)}
.arc-tabs__tab--active{color:var(--text-primary);font-weight:var(--weight-semibold)}
.arc-tabs__tab--active::after{content:"";position:absolute;left:var(--space-2);right:var(--space-2);bottom:-1px;height:2px;background:var(--surface-brand);border-radius:var(--radius-full)}
.arc-tabs__count{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-tertiary);background:var(--surface-sunken);padding:1px 5px;border-radius:var(--radius-full)}
.arc-tabs--pill{border-bottom:0;background:var(--surface-sunken);padding:3px;border-radius:var(--radius-md);gap:2px;display:inline-flex}
.arc-tabs--pill .arc-tabs__tab{height:28px;border-radius:var(--radius-sm);font-size:var(--text-xs)}
.arc-tabs--pill .arc-tabs__tab--active{background:var(--surface-card);box-shadow:var(--shadow-xs)}
.arc-tabs--pill .arc-tabs__tab--active::after{display:none}

.arc-sidenav{display:flex;flex-direction:column;gap:1px}
.arc-sidenav__section{font:var(--type-eyebrow);text-transform:uppercase;letter-spacing:var(--tracking-widest);color:var(--text-tertiary);padding:var(--space-4) var(--space-2-5) var(--space-1-5)}
.arc-sidenav__item{display:flex;align-items:center;gap:var(--space-2-5);height:32px;padding:0 var(--space-2-5);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;border:0;background:none;width:100%;text-align:left;transition:var(--transition-control)}
.arc-sidenav__item:hover{background:var(--surface-hover);color:var(--text-primary)}
.arc-sidenav__item--active{background:var(--surface-selected);color:var(--text-brand);font-weight:var(--weight-semibold)}
.arc-sidenav__item--active:hover{background:var(--surface-selected)}
.arc-sidenav__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arc-sidenav__trailing{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-tertiary)}
.arc-sidenav__dot{width:6px;height:6px;border-radius:var(--radius-full);background:var(--status-danger-solid);flex:none}

/* ── ds/components/feedback.css ── */
.arc-callout{display:flex;gap:var(--space-2-5);padding:var(--space-3);border:var(--border-width) solid;border-radius:var(--radius-md);font:var(--type-body-sm)}
.arc-callout--info{background:var(--status-info-bg);border-color:var(--status-info-border);color:var(--status-info-fg)}
.arc-callout--success{background:var(--status-success-bg);border-color:var(--status-success-border);color:var(--status-success-fg)}
.arc-callout--warning{background:var(--status-warning-bg);border-color:var(--status-warning-border);color:var(--status-warning-fg)}
.arc-callout--danger{background:var(--status-danger-bg);border-color:var(--status-danger-border);color:var(--status-danger-fg)}
.arc-callout--neutral{background:var(--surface-sunken);border-color:var(--border-default);color:var(--text-secondary)}
.arc-callout__title{font-weight:var(--weight-semibold);color:inherit;margin-bottom:2px}
.arc-callout__body{color:inherit;opacity:.92}
.arc-callout__actions{display:flex;gap:var(--space-2);margin-top:var(--space-2-5)}

.arc-toast{display:flex;align-items:flex-start;gap:var(--space-2-5);width:360px;padding:var(--space-3);background:var(--surface-inverse);color:var(--text-inverse);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);animation:arc-fade-up var(--duration-slow) var(--ease-emphasis)}
.arc-toast__title{font:var(--type-label);color:var(--text-inverse)}
.arc-toast__body{font:var(--type-caption);color:var(--neutral-400);margin-top:2px}
.arc-toast__action{border:0;background:none;padding:0;margin-top:var(--space-2);color:var(--indigo-300);font:var(--type-label);cursor:pointer}
.arc-toast__action:hover{color:var(--indigo-200)}
.arc-toast__close{margin-left:auto;border:0;background:none;color:var(--neutral-500);cursor:pointer;padding:2px;display:flex}
.arc-toast__close:hover{color:var(--neutral-0)}
.arc-toast--success .arc-toast__icon{color:#4ADE80}
.arc-toast--danger .arc-toast__icon{color:#FCA5A5}
.arc-toast--info .arc-toast__icon{color:var(--indigo-300)}

.arc-tooltip{position:relative;display:inline-flex}
.arc-tooltip__bubble{position:absolute;z-index:var(--z-tooltip);padding:5px var(--space-2);background:var(--surface-inverse);color:var(--text-inverse);font:var(--type-caption);border-radius:var(--radius-xs);white-space:nowrap;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}
.arc-tooltip__bubble--visible{opacity:1}
.arc-tooltip__bubble--top{bottom:calc(100% + 6px);left:50%;transform:translateX(-50%)}
.arc-tooltip__bubble--bottom{top:calc(100% + 6px);left:50%;transform:translateX(-50%)}
.arc-tooltip__bubble--right{left:calc(100% + 6px);top:50%;transform:translateY(-50%)}
.arc-tooltip__kbd{margin-left:var(--space-1-5);color:var(--neutral-400);font-family:var(--font-mono)}

.arc-dialog__scrim{position:fixed;inset:0;background:var(--surface-overlay);backdrop-filter:blur(2px);z-index:var(--z-overlay);display:flex;align-items:center;justify-content:center;padding:var(--space-6);animation:arc-fade-in var(--duration-base) var(--ease-out)}
.arc-dialog{background:var(--surface-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);width:100%;max-height:100%;display:flex;flex-direction:column;animation:arc-fade-up var(--duration-slow) var(--ease-emphasis);overflow:hidden}
.arc-dialog--sm{max-width:400px}.arc-dialog--md{max-width:520px}.arc-dialog--lg{max-width:720px}
.arc-dialog__header{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-5) var(--space-5) var(--space-3)}
.arc-dialog__title{font:var(--type-heading);font-family:var(--font-display);letter-spacing:var(--tracking-tight)}
.arc-dialog__desc{font:var(--type-body-sm);color:var(--text-secondary);margin-top:var(--space-1)}
.arc-dialog__body{padding:0 var(--space-5) var(--space-5);overflow:auto}
.arc-dialog__footer{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-top:var(--border-width) solid var(--border-subtle);background:var(--surface-page)}

/* ── ds/components/data.css ── */
.arc-table{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--font-sans);font-size:var(--text-sm)}
.arc-table th{text-align:left;font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-tertiary);padding:0 var(--space-3);height:32px;background:var(--surface-page);border-bottom:var(--border-width) solid var(--border-default);white-space:nowrap;position:sticky;top:0;z-index:1}
.arc-table td{padding:0 var(--space-3);height:var(--row-height);border-bottom:var(--border-width) solid var(--border-subtle);color:var(--text-primary);vertical-align:middle}
.arc-table tbody tr:hover td{background:var(--surface-hover)}
.arc-table tbody tr:last-child td{border-bottom:0}
.arc-table--compact td{height:var(--row-height-sm)}
.arc-table__num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--text-xs)}
.arc-table__mono{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary)}
.arc-table__sortable{cursor:pointer;user-select:none}
.arc-table__sortable:hover{color:var(--text-secondary)}
.arc-table__flag td{background:var(--status-warning-bg)}
.arc-table__flag:hover td{background:var(--amber-100)}
.arc-table__empty{padding:var(--space-10);text-align:center;color:var(--text-tertiary);font:var(--type-body-sm)}

.arc-metric{display:flex;flex-direction:column;gap:var(--space-1-5);min-width:0}
.arc-metric__label{font:var(--type-caption);color:var(--text-tertiary);display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-1-5);min-width:0}
.arc-metric__value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:var(--weight-medium);font-size:var(--text-3xl);line-height:var(--leading-none);letter-spacing:var(--tracking-tight);color:var(--text-primary)}
.arc-metric__value--sm{font-size:var(--text-xl)}
.arc-metric__unit{font-size:var(--text-base);color:var(--text-tertiary);margin-left:2px}
.arc-metric__delta{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-medium)}
.arc-metric__delta--up{color:var(--status-success-fg)}
.arc-metric__delta--down{color:var(--status-danger-fg)}
.arc-metric__delta--flat{color:var(--text-tertiary)}
.arc-metric__foot{font:var(--type-caption);color:var(--text-tertiary)}

.arc-chart{display:flex;align-items:flex-end;gap:2px;height:56px}
.arc-chart__bar{flex:1;min-width:2px;background:var(--indigo-200);border-radius:2px 2px 0 0;transition:background-color var(--duration-fast) var(--ease-out)}
.arc-chart__bar--accent{background:var(--surface-brand)}
.arc-chart__bar--alert{background:var(--status-danger-solid)}
.arc-chart:hover .arc-chart__bar{background:var(--indigo-300)}
.arc-chart:hover .arc-chart__bar--accent{background:var(--surface-brand)}
.arc-chart:hover .arc-chart__bar--alert{background:var(--status-danger-solid)}
.arc-chart__axis{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-tertiary);margin-top:var(--space-1-5)}