/* PAFworks design tokens */

/* ---- fonts.css ---- */
/* PAFworks webfonts. No brand font binaries were supplied; these are the
   Google Fonts substitutes chosen for the system. Swap the src URLs if
   licensed binaries arrive. */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap");


/* ---- colors.css ---- */
:root{
/* --- Base ramps --------------------------------------------------------- */
/* Pine — the PAFworks primary. Cool, institutional, not corporate blue. */
--pine-900:#062F27;--pine-800:#0A4438;--pine-700:#0D5445;--pine-600:#116554;--pine-500:#177E68;--pine-400:#2E9C84;--pine-300:#67BFA9;--pine-200:#A8DCCE;--pine-100:#D6EFE7;--pine-50:#EDF8F4;
/* Clay — the single warm accent. Used for emphasis, never for whole surfaces. */
--clay-700:#8F3A14;--clay-600:#B14A1B;--clay-500:#D2622B;--clay-400:#E4844F;--clay-300:#F0AC83;--clay-200:#F8D3BB;--clay-100:#FCE9DE;
/* Ink — warm-neutral greys, very slightly green so they sit under Pine. */
--ink-900:#0F1512;--ink-800:#1B221E;--ink-700:#2C3531;--ink-600:#455049;--ink-500:#5F6B64;--ink-400:#828D87;--ink-300:#AAB3AE;--ink-200:#CDD4D0;--ink-150:#DFE4E1;--ink-100:#ECEFED;--ink-50:#F5F6F4;
--paper:#FCFBF8;--white:#FFFFFF;
/* Semantic ramps */
--green-600:#1B7F4B;--green-100:#DFF3E7;
--amber-600:#A66300;--amber-100:#FBEBCF;
--red-600:#B3261E;--red-100:#FADEDB;
--blue-600:#1E5F9E;--blue-100:#DDEAF6;
/* App-surface accents — one hue per PAFworks app, used only for app chrome
   marks, calendar categories and file-type glyphs. */
--app-files:#177E68;--app-mail:#1E5F9E;--app-calendar:#D2622B;--app-contacts:#7A4FA3;

/* --- Semantic aliases --------------------------------------------------- */
--surface-page:var(--paper);
--surface-card:var(--white);
--surface-sunken:var(--ink-50);
--surface-raised:var(--white);
--surface-inverse:var(--ink-900);
--surface-nav:var(--pine-900);
--surface-accent-soft:var(--pine-50);
--surface-hover:var(--ink-50);
--surface-selected:var(--pine-50);
--surface-scrim:rgba(15,21,18,.48);

--text-body:var(--ink-800);
--text-strong:var(--ink-900);
--text-muted:var(--ink-500);
--text-faint:var(--ink-400);
--text-inverse:#EAF2EF;
--text-link:var(--pine-600);
--text-link-hover:var(--pine-700);
--text-on-accent:var(--white);
--text-danger:var(--red-600);

--border-hairline:var(--ink-150);
--border-strong:var(--ink-200);
--border-field:var(--ink-200);
--border-focus:var(--pine-500);
--border-inverse:rgba(255,255,255,.14);

--accent-primary:var(--pine-600);
--accent-primary-hover:var(--pine-700);
--accent-primary-active:var(--pine-800);
--accent-secondary:var(--clay-500);
--accent-secondary-hover:var(--clay-600);

--focus-ring:0 0 0 3px var(--pine-200);
--focus-ring-inverse:0 0 0 3px rgba(103,191,169,.42);
}


/* ---- typography.css ---- */
:root{
--font-display:"Space Grotesk","Space Grotesk Fallback",system-ui,sans-serif;
--font-ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

--fs-display-xl:56px;--lh-display-xl:60px;
--fs-display-l:40px;--lh-display-l:46px;
--fs-display-m:30px;--lh-display-m:36px;
--fs-title-l:22px;--lh-title-l:28px;
--fs-title-m:18px;--lh-title-m:24px;
--fs-title-s:15px;--lh-title-s:20px;
--fs-body-l:15px;--lh-body-l:23px;
--fs-body-m:14px;--lh-body-m:21px;
--fs-body-s:13px;--lh-body-s:19px;
--fs-caption:12px;--lh-caption:16px;
--fs-micro:11px;--lh-micro:14px;

--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */
--ls-display:-0.02em; /* @kind font */
--ls-title:-0.01em; /* @kind font */
--ls-body:0; /* @kind font */
--ls-caps:0.08em; /* @kind font */

/* Composed roles */
--text-display-xl:var(--fw-bold) var(--fs-display-xl)/var(--lh-display-xl) var(--font-display);
--text-display-l:var(--fw-bold) var(--fs-display-l)/var(--lh-display-l) var(--font-display);
--text-display-m:var(--fw-semibold) var(--fs-display-m)/var(--lh-display-m) var(--font-display);
--text-title-l:var(--fw-semibold) var(--fs-title-l)/var(--lh-title-l) var(--font-display);
--text-title-m:var(--fw-semibold) var(--fs-title-m)/var(--lh-title-m) var(--font-ui);
--text-title-s:var(--fw-semibold) var(--fs-title-s)/var(--lh-title-s) var(--font-ui);
--text-body-l:var(--fw-regular) var(--fs-body-l)/var(--lh-body-l) var(--font-ui);
--text-body-m:var(--fw-regular) var(--fs-body-m)/var(--lh-body-m) var(--font-ui);
--text-body-s:var(--fw-regular) var(--fs-body-s)/var(--lh-body-s) var(--font-ui);
--text-caption:var(--fw-medium) var(--fs-caption)/var(--lh-caption) var(--font-ui);
--text-mono-s:var(--fw-regular) var(--fs-body-s)/var(--lh-body-s) var(--font-mono);
}


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

/* Component rhythm */
--pad-control-x:14px;--pad-control-y:8px;
--pad-card:20px;
--pad-panel:24px;
--gap-inline:8px;--gap-stack:12px;--gap-section:32px;

/* App shell metrics — fixed across every PAFworks surface */
--rail-width:64px;
--sidebar-width:248px;
--topbar-height:56px;
--listpane-width:380px;
--row-height:44px;
--content-max:1200px;
--prose-max:68ch;
}


/* ---- shape.css ---- */
:root{
--radius-xs:3px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:18px;--radius-pill:999px;
--radius-control:var(--radius-sm);
--radius-card:var(--radius-lg);
--radius-panel:var(--radius-lg);
--radius-avatar:var(--radius-pill);

--border-width:1px;--border-width-strong:2px; /* @kind spacing */

/* Shadows are shallow and green-black; PAFworks leans on hairlines first. */
--shadow-none:none;
--shadow-xs:0 1px 1px rgba(6,47,39,.05);
--shadow-sm:0 1px 2px rgba(6,47,39,.06),0 1px 1px rgba(6,47,39,.04);
--shadow-md:0 4px 10px -2px rgba(6,47,39,.10),0 1px 2px rgba(6,47,39,.06);
--shadow-lg:0 16px 32px -8px rgba(6,47,39,.16),0 2px 6px rgba(6,47,39,.06);
--shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.5);
--overlay-blur:saturate(140%) blur(10px); /* @kind other */
}


/* ---- motion.css ---- */
:root{
--dur-instant:80ms; /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:180ms; /* @kind other */
--dur-slow:260ms; /* @kind other */
--dur-panel:320ms; /* @kind other */
--ease-standard:cubic-bezier(.2,.7,.3,1); /* @kind other */
--ease-out:cubic-bezier(0,.7,.3,1); /* @kind other */
--ease-in:cubic-bezier(.5,0,1,.5); /* @kind other */
--transition-control:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard); /* @kind other */
--transition-surface:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);
--press-scale:0.985; /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
--dur-instant:0ms; /* @kind other */
--dur-fast:0ms; /* @kind other */
--dur-base:0ms; /* @kind other */
--dur-slow:0ms; /* @kind other */
--dur-panel:0ms; /* @kind other */
--press-scale:1; /* @kind other */
}}


/* ---- base.css ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--text-body-m);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:2px}
::selection{background:var(--pine-200);color:var(--pine-900)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
h1,h2,h3,h4{margin:0;color:var(--text-strong)}
h1{font:var(--text-display-l);letter-spacing:var(--ls-display)}
h2{font:var(--text-display-m);letter-spacing:var(--ls-display)}
h3{font:var(--text-title-l);letter-spacing:var(--ls-title)}
h4{font:var(--text-title-m)}
p{margin:0 0 var(--space-5)}
code,kbd{font:var(--text-mono-s)}