/* zahrcast design tokens — flattened from the design system's styles.css closure.
   Source of truth is the design-system project; regenerate rather than hand-edit. */

/* ---- tokens/fonts.css ---- */
/* Khand + Liter, vendored from karimn/zahrcast-brand (SIL OFL — license files in assets/fonts/). */
@font-face{font-family:"Khand";src:url("fonts/Khand-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Khand";src:url("fonts/Khand-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Khand";src:url("fonts/Khand-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Khand";src:url("fonts/Khand-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Khand";src:url("fonts/Khand-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Liter";src:url("fonts/Liter-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

/* ---- tokens/colors.css ---- */
:root{
/* Base palette — the five canonical brand colors (tokens.json) */
--zahr-ink:#17223B;
--zahr-navy:#0F1830;
--zahr-amber:#F2A83B;
--zahr-bone:#F6F3EC;
--zahr-slate:#5A6478;

/* Derived neutrals — mixes of the five, for surfaces, rules and states only.
   No new hues are introduced: every value below is ink/slate/bone/navy blended. */
--zahr-bone-raised:#FFFDF8;
--zahr-bone-sunken:#EFEBE1;
--zahr-rule:#DCD6C9;
--zahr-rule-strong:#C4BDAD;
--zahr-ink-08:rgba(23,34,59,.08);
--zahr-ink-16:rgba(23,34,59,.16);
--zahr-ink-64:rgba(23,34,59,.64);
--zahr-bone-16:rgba(246,243,236,.16);
--zahr-bone-64:rgba(246,243,236,.64);
--zahr-amber-16:rgba(242,168,59,.16);

/* Interaction shades — press/hover are value shifts of the same hue */
--zahr-ink-hover:#1F2C4A;
--zahr-ink-press:#101A2E;
--zahr-amber-hover:#FFB94C;
--zahr-amber-press:#D9902A;

/* Semantic aliases — use these in components */
--text-body:var(--zahr-ink);
--text-muted:var(--zahr-slate);
--text-heading:var(--zahr-ink);
--text-inverse:var(--zahr-bone);
--text-inverse-muted:var(--zahr-bone-64);
--text-accent:var(--zahr-ink);

--surface-page:var(--zahr-bone);
--surface-card:var(--zahr-bone-raised);
--surface-sunken:var(--zahr-bone-sunken);
--surface-inverse:var(--zahr-navy);
--surface-accent:var(--zahr-amber);

--border-default:var(--zahr-rule);
--border-strong:var(--zahr-rule-strong);
--border-focus:var(--zahr-ink);
--border-inverse:var(--zahr-bone-16);

--accent-dot:var(--zahr-amber);
--focus-ring:var(--zahr-ink);
}

/* Reversed scope: bone on navy. Apply to a section, not the page, unless the
   whole surface is dark. */
[data-theme="reversed"]{
--text-body:var(--zahr-bone);
--text-muted:var(--zahr-bone-64);
--text-heading:var(--zahr-bone);
--text-inverse:var(--zahr-ink);
--surface-page:var(--zahr-navy);
--surface-card:#17223B;
--surface-sunken:#0B1226;
--border-default:var(--zahr-bone-16);
--border-strong:rgba(246,243,236,.32);
--focus-ring:var(--zahr-amber);
}

/* ---- tokens/typography.css ---- */
:root{
/* Families */
--font-display:"Khand","Khand Fallback",system-ui,sans-serif;
--font-body:"Liter","Liter Fallback",Georgia,serif;
--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

/* Weights — Khand ships 300/400/500/600/700; brand default for the wordmark
   and headings is 500 (Medium). Liter is 400 only. */
--weight-light:300;
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;

/* Tracking — the wordmark spec is +1.5 (expressed here in em at 1rem = 16px) */
--tracking-wordmark:.094em;
--tracking-display:.02em;
--tracking-eyebrow:.16em;
--tracking-body:0;

/* Display scale — Khand, lowercase, tight leading */
--display-1:clamp(3rem,7vw,5.25rem); /* @kind font */
--display-2:clamp(2.5rem,5vw,3.75rem); /* @kind font */
--display-3:2.5rem; /* @kind font */
--heading-1:2rem; /* @kind font */
--heading-2:1.5rem; /* @kind font */
--heading-3:1.25rem; /* @kind font */
--leading-display:.98;
--leading-heading:1.1;

/* Body scale — Liter, generous leading (it has a small x-height) */
--body-lg:1.125rem;
--body-md:1rem;
--body-sm:.875rem;
--body-xs:.75rem;
--leading-body:1.65;
--leading-tight:1.4;

/* Eyebrow / label — Khand uppercase, wide tracking */
--label-size:.8125rem;
--label-size-sm:.6875rem;
}

/* ---- tokens/spacing.css ---- */
:root{
/* 4px base step. --space-6 (24px) is the default block rhythm. */
--space-0:0;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-24:96px;
--space-32:128px;

/* Layout */
--measure-prose:64ch; /* @kind spacing */
--container-md:720px;
--container-lg:1080px;
--container-xl:1320px;
--gutter:var(--space-6);
--section-y:var(--space-24);

/* Logo clear space equals the amber dot diameter (dot = 10.4% of mark width) */
--logo-clearspace:.104; /* @kind other */
}

/* ---- tokens/shape.css ---- */
:root{
/* Radii — the mark is built from hard-edged rectangles, so the system is
   near-square: 2px is the house radius, 0 for anything logo-adjacent. */
--radius-none:0;
--radius-sm:2px;
--radius-md:3px;
--radius-lg:4px;
--radius-pill:999px;
--radius-dot:50%;

/* Borders — 1px hairline rules do most of the separating work */
--border-width:1px;
--border-width-strong:2px;
--border-width-rule:1px;

/* Shadows — restrained, ink-tinted, never colored or glowy */
--shadow-none:none;
--shadow-sm:0 1px 0 var(--zahr-ink-08);
--shadow-md:0 1px 2px rgba(23,34,59,.06),0 2px 8px rgba(23,34,59,.06);
--shadow-lg:0 2px 4px rgba(23,34,59,.06),0 12px 32px rgba(23,34,59,.10);
--shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);
--ring-focus:0 0 0 2px var(--surface-page),0 0 0 4px var(--focus-ring);

/* Blur — used only for sticky bars over content */
--blur-bar:saturate(140%) blur(10px); /* @kind other */
}

/* ---- tokens/motion.css ---- */
:root{
/* Motion is quiet: short, eased, opacity + small translate. No bounce, no spin. */
--duration-instant:80ms; /* @kind other */
--duration-fast:140ms; /* @kind other */
--duration-base:200ms; /* @kind other */
--duration-slow:320ms; /* @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(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-instant) var(--ease-standard); /* @kind other */
--lift-hover:translateY(-1px); /* @kind other */
--press-scale:.985; /* @kind other */
}

/* ---- tokens/base.css ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--body-md);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-display);font-weight:var(--weight-medium);color:var(--text-heading);letter-spacing:var(--tracking-display);line-height:var(--leading-heading);text-transform:lowercase}
p{margin:0}
a{color:var(--text-body);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--zahr-ink-16);transition:text-decoration-color var(--duration-fast) var(--ease-standard)}
a:hover{text-decoration-color:var(--zahr-amber)}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}
hr{border:0;border-top:var(--border-width-rule) solid var(--border-default);margin:var(--space-8) 0}
code,kbd,samp{font-family:var(--font-mono);font-size:.9em}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}