/* GENERATED by scripts/build-css.mjs — edit public/css/tokens/*.css instead. */

/* ── colors.css ─────────────────────────────────────── */
:root{
/* ── Brand purple — from the Ekteb mark (#604D8C) ───────────────── */
--purple-25:#f8f7fb;--purple-50:#f1eef7;--purple-100:#e7ddf6;--purple-200:#cfc4e2;--purple-300:#ab9ac6;--purple-400:#8874ab;--purple-500:#6f5a9c;--purple-600:#604d8c;--purple-700:#4e3e73;--purple-800:#3b2f58;--purple-900:#2a213e;
/* ── Ink / neutral — anchored on the wordmark navy (#344054) ────── */
--gray-25:#fcfcfd;--gray-50:#f9fafb;--gray-100:#f2f4f7;--gray-200:#eaecf0;--gray-300:#d0d5dd;--gray-400:#98a2b3;--gray-500:#667085;--gray-600:#475467;--gray-700:#344054;--gray-800:#182230;--gray-900:#101828;
/* ── Semantic scales ───────────────────────────────────────────── */
--green-50:#ecfdf3;--green-100:#d1fadf;--green-200:#a6f4c5;--green-400:#47c586;--green-500:#31bf77;--green-600:#039855;--green-700:#027a48;
--amber-50:#fffaeb;--amber-100:#fef0c7;--amber-400:#fdb022;--amber-500:#f79009;--amber-700:#b54708;
--red-50:#fef3f2;--red-100:#fee4e2;--red-400:#fa776d;--red-500:#f04438;--red-700:#b42318;
--indigo-50:#eef4ff;--indigo-100:#e0eaff;--indigo-400:#8098f9;--indigo-500:#6172f3;--indigo-600:#444ce7;
/* ── Secondary accents: data-viz + content categories ───────────── */
--accent-purple:#604d8c;--accent-teal:#0e9384;--accent-amber:#f79009;--accent-indigo:#444ce7;--accent-rose:#e31b54;--accent-slate:#667085;

/* ── Semantic aliases ──────────────────────────────────────────── */
--brand:var(--purple-600);--brand-hover:var(--purple-700);--brand-active:var(--purple-800);--brand-subtle:var(--purple-50);--brand-subtle-strong:var(--purple-100);--brand-border:var(--purple-200);--brand-on:#fff;

--text-strong:var(--gray-900);--text-body:var(--gray-700);--text-muted:var(--gray-500);--text-subtle:var(--gray-400);--text-placeholder:var(--gray-400);--text-on-brand:#fff;--text-brand:var(--purple-600);--text-link:var(--purple-600);--text-link-hover:var(--purple-800);--text-inverse:#fff;

--surface-page:#fff;--surface-canvas:var(--gray-50);--surface-card:#fff;--surface-raised:#fff;--surface-sunken:var(--gray-50);--surface-nav:#fff;--surface-nav-active:var(--purple-50);--surface-table-head:var(--gray-50);--surface-hover:var(--gray-50);--surface-selected:var(--purple-50);--surface-dark:var(--gray-900);--surface-editor:var(--gray-25);

--border-subtle:var(--gray-100);--border-default:var(--gray-200);--border-strong:var(--gray-300);--border-focus:var(--purple-400);--border-brand:var(--purple-600);

--success:var(--green-600);--success-solid:var(--green-500);--success-subtle:var(--green-50);--success-border:var(--green-200);
--warning:var(--amber-700);--warning-solid:var(--amber-500);--warning-subtle:var(--amber-50);--warning-border:var(--amber-100);
--danger:var(--red-700);--danger-solid:var(--red-500);--danger-soft:var(--red-400);--danger-subtle:var(--red-50);--danger-border:var(--red-100);
--info:var(--indigo-600);--info-solid:var(--indigo-500);--info-subtle:var(--indigo-50);--info-border:var(--indigo-100);

/* ── Editor-specific (timeline / clips) ────────────────────────── */
--clip-subtitle-ar:var(--purple-100);--clip-subtitle-ar-border:var(--purple-300);--clip-subtitle-src:#fff;--clip-audio:var(--green-50);--clip-waveform:var(--green-400);--playhead:#f5a524;--crop-guide:var(--purple-600);--loader-scrim:rgba(255,255,255,.62);
}

/* ── typography.css ─────────────────────────────────────── */
:root{
/* Families — Baloo 2 for display/brand moments only; IBM Plex for all functional UI */
--font-display:'Baloo 2','IBM Plex Sans Arabic',system-ui,sans-serif;
--font-sans:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,-apple-system,sans-serif;
--font-arabic:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

/* Sizes */
--text-2xs:11px;--text-xs:12px;--text-sm:13px;--text-md:14px;--text-base:15px;--text-lg:16px;--text-xl:18px;--text-2xl:20px;--text-3xl:24px;--text-4xl:30px;--text-5xl:36px;--text-6xl:44px;--text-7xl:56px;--text-8xl:72px;

/* Line heights */
--leading-tight:1.08;--leading-snug:1.2;--leading-heading:1.3;--leading-normal:1.5;--leading-relaxed:1.65;

/* Weights */
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;

/* Tracking */
--tracking-tighter:-0.03em;--tracking-tight:-0.015em;--tracking-normal:0;--tracking-wide:0.02em;--tracking-caps:0.06em;

/* Semantic type roles */
--type-display-hero:var(--weight-extrabold) var(--text-7xl)/var(--leading-tight) var(--font-display);
--type-display-lg:var(--weight-bold) var(--text-6xl)/var(--leading-tight) var(--font-display);
--type-display-md:var(--weight-bold) var(--text-5xl)/var(--leading-snug) var(--font-display);
--type-display-sm:var(--weight-bold) var(--text-4xl)/var(--leading-snug) var(--font-display);
--type-heading-lg:var(--weight-semibold) var(--text-3xl)/var(--leading-heading) var(--font-sans);
--type-heading-md:var(--weight-semibold) var(--text-2xl)/var(--leading-heading) var(--font-sans);
--type-heading-sm:var(--weight-semibold) var(--text-xl)/var(--leading-heading) var(--font-sans);
--type-body-lg:var(--weight-regular) var(--text-lg)/var(--leading-relaxed) 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-md)/var(--leading-normal) var(--font-sans);
--type-label:var(--weight-medium) var(--text-md)/1.4 var(--font-sans);
--type-label-sm:var(--weight-medium) var(--text-xs)/1.35 var(--font-sans);
--type-button:var(--weight-semibold) var(--text-md)/1 var(--font-sans);
--type-caption:var(--weight-regular) var(--text-xs)/1.4 var(--font-sans);
--type-eyebrow:var(--weight-semibold) var(--text-xs)/1.3 var(--font-sans);
--type-mono:var(--weight-medium) var(--text-xs)/1.4 var(--font-mono);
}

/* ── spacing.css ─────────────────────────────────────── */
:root{
--space-0:0;--space-1:2px;--space-2:4px;--space-3:6px;--space-4:8px;--space-5:10px;--space-6:12px;--space-7:14px;--space-8:16px;--space-9:20px;--space-10:24px;--space-11:28px;--space-12:32px;--space-14:40px;--space-16:48px;--space-20:64px;--space-24:80px;--space-28:96px;--space-32:120px;
/* Layout */
--container-max:1200px;--container-wide:1360px;--sidebar-w:272px;--sidebar-w-collapsed:72px;--topbar-h:76px;--rail-w:56px;--editor-panel-w:314px;
--gutter-page:24px;--gutter-page-lg:64px;--section-y:96px;--section-y-lg:120px;
--card-pad:16px;--card-pad-lg:20px;--field-h:44px;--field-h-sm:36px;--control-gap:12px;--row-h:112px;
}

/* ── radii.css ─────────────────────────────────────── */
:root{
--radius-none:0;--radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:10px;--radius-xl:12px;--radius-2xl:16px;--radius-pill:999px;--radius-circle:50%;
/* Semantic */
--radius-button:6px;--radius-field:6px;--radius-badge:6px;--radius-chip:999px;--radius-card:10px;--radius-panel:12px;--radius-modal:16px;--radius-thumb:8px;--radius-avatar:50%;
--border-width:1px;--border-width-thick:1.5px;--focus-ring-width:3px;
}

/* ── shadows.css ─────────────────────────────────────── */
:root{
--shadow-xs:0 1px 2px rgba(16,24,40,.05);
--shadow-sm:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
--shadow-md:0 4px 8px -2px rgba(16,24,40,.06),0 2px 4px -2px rgba(16,24,40,.04);
--shadow-lg:0 12px 16px -4px rgba(16,24,40,.06),0 4px 6px -2px rgba(16,24,40,.03);
--shadow-xl:0 20px 24px -4px rgba(16,24,40,.08),0 8px 8px -4px rgba(16,24,40,.03);
--shadow-modal:0 24px 48px -12px rgba(16,24,40,.18);
--shadow-toolbar:0 8px 24px -6px rgba(16,24,40,.16);
--shadow-inset-field:inset 0 1px 2px rgba(16,24,40,.04);
--ring-brand:0 0 0 3px rgba(96,77,140,.18);
--ring-danger:0 0 0 3px rgba(240,68,56,.16);
--ring-success:0 0 0 3px rgba(3,152,85,.16);
--overlay-scrim:rgba(52,64,84,.28);
--protection-bottom:linear-gradient(to top,rgba(16,24,40,.72) 0%,rgba(16,24,40,.35) 45%,transparent 100%); /* @kind other */
--protection-top:linear-gradient(to bottom,rgba(16,24,40,.55) 0%,transparent 100%); /* @kind other */
}

/* ── motion.css ─────────────────────────────────────── */
:root{
--duration-instant:80ms; /* @kind other */--duration-fast:140ms; /* @kind other */--duration-base:200ms; /* @kind other */--duration-slow:320ms; /* @kind other */--duration-slower:480ms; /* @kind other */
--ease-standard:cubic-bezier(.2,.8,.3,1); /* @kind other */--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */--ease-in:cubic-bezier(.4,0,1,1); /* @kind other */--ease-inout:cubic-bezier(.4,0,.2,1); /* @kind other */
--transition-control:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard); /* @kind other */
--transition-surface:box-shadow var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard); /* @kind other */
--press-scale:.98; /* @kind other */
}

/* ── base.css ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--type-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[dir="rtl"] body,body[dir="rtl"],.ekteb-rtl{font-family:var(--font-arabic)}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-strong)}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
button{font-family:inherit}
:focus-visible{outline:none;box-shadow:var(--ring-brand)}
img{display:block;max-width:100%}
::selection{background:var(--purple-100);color:var(--purple-900)}

/* ── dark.css ─────────────────────────────────────── */
/* Dark theme — semantic aliases only. Toggled by the header moon/sun button,
   which sets data-theme="dark" on <html> and remembers the choice. */
[data-theme="dark"]{
color-scheme:dark;
--brand:var(--purple-500);--brand-hover:var(--purple-400);--brand-active:var(--purple-300);--brand-subtle:#241e34;--brand-subtle-strong:#302748;--brand-border:#473b68;--brand-on:#fff;

--text-strong:#f4f6f9;--text-body:#d8dce4;--text-muted:#98a1b0;--text-subtle:#7a8393;--text-placeholder:#6b7382;--text-on-brand:#fff;--text-brand:var(--purple-300);--text-link:var(--purple-300);--text-link-hover:var(--purple-200);--text-inverse:var(--gray-900);

--surface-page:#0f1219;--surface-canvas:#0b0e14;--surface-card:#141821;--surface-raised:#1a1f2a;--surface-sunken:#11151d;--surface-nav:#0f1219;--surface-nav-active:#241e34;--surface-table-head:#11151d;--surface-hover:#1b2029;--surface-selected:#241e34;--surface-dark:#080a0f;--surface-editor:#0f1219;

--border-subtle:#1e2430;--border-default:#272e3b;--border-strong:#38414f;--border-focus:var(--purple-400);--border-brand:var(--purple-400);

--success:#63d69d;--success-solid:var(--green-500);--success-subtle:#122419;--success-border:#1f4632;
--warning:#f4c374;--warning-solid:var(--amber-500);--warning-subtle:#2a2013;--warning-border:#4a3617;
--danger:#f8968d;--danger-solid:var(--red-500);--danger-soft:var(--red-400);--danger-subtle:#2b1817;--danger-border:#4d2520;
--info:#a0b1fb;--info-solid:var(--indigo-500);--info-subtle:#161c31;--info-border:#2a3560;

--shadow-xs:0 1px 2px rgba(0,0,0,.4);
--shadow-sm:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3);
--shadow-md:0 4px 8px -2px rgba(0,0,0,.5),0 2px 4px -2px rgba(0,0,0,.35);
--shadow-lg:0 12px 16px -4px rgba(0,0,0,.55),0 4px 6px -2px rgba(0,0,0,.35);
--shadow-xl:0 20px 24px -4px rgba(0,0,0,.6),0 8px 8px -4px rgba(0,0,0,.35);
--shadow-modal:0 24px 48px -12px rgba(0,0,0,.7);
--shadow-toolbar:0 8px 24px -6px rgba(0,0,0,.6);
--shadow-inset-field:inset 0 1px 2px rgba(0,0,0,.35);
--overlay-scrim:rgba(4,6,10,.62);--loader-scrim:rgba(8,10,15,.66);

--clip-subtitle-ar:#302748;--clip-subtitle-ar-border:var(--purple-400);--clip-subtitle-src:#1a1f2a;--clip-audio:#122419;--clip-waveform:var(--green-400);
}
[data-theme="dark"] ::selection{background:var(--purple-700);color:#fff}
[data-theme="dark"] img{opacity:.94}
/* the wordmark is dark navy — lift it off dark surfaces without losing the purple mark */
[data-theme="dark"] img[src$="logo.svg"]{opacity:1;filter:invert(1) hue-rotate(180deg) saturate(1.15)}