/* CreativeArt design tokens, copied verbatim from the design system (ca-design, commit 13457d3):
   tokens/colors.css, typography.css, spacing.css, effects.css and base.css, in that order.
   Only fonts.css is replaced: the CSP allows same-origin fonts only, so the faces below are
   self-hosted (assets/fonts, SIL Open Font License). Public Sans and IBM Plex Mono are the
   design system's stand-ins until CreativeArt names its brand fonts.
   Do not edit the tokens here: change them in the design system and copy them again. */

@font-face{font-family:"Public Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/public-sans-400.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/public-sans-400-italic.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/public-sans-500.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/public-sans-600.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/public-sans-700.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2")}

/* tokens/colors.css */
:root{
/* Brand */
--ca-black:#000000;
--ca-red:#B02A28;
--ca-red-dark:#8E1F1E;
--ca-red-light:#FBEBEA;
--ca-white:#FFFFFF;
--ca-grey:#5D5E60; /* site theme-color */
/* Warm neutrals */
--ca-neutral-0:#FFFFFF;
--ca-neutral-50:#FAF9F7;
--ca-neutral-100:#F3F1EE;
--ca-neutral-200:#E6E3DE;
--ca-neutral-300:#D2CEC7;
--ca-neutral-400:#A9A49C;
--ca-neutral-500:#7E7A73;
--ca-neutral-600:#5D5E60;
--ca-neutral-700:#43423F;
--ca-neutral-800:#2A2927;
--ca-neutral-900:#161514;
/* Semantic status */
--ca-success:#2E7D4F;
--ca-success-bg:#E6F4EB;
--ca-warning:#B9780A;
--ca-warning-bg:#FDF3DF;
--ca-danger:#B02A28;
--ca-danger-bg:#FBEBEA;
--ca-info:#2F5F9E;
--ca-info-bg:#E8EFF9;
/* Semantic aliases */
--surface-page:var(--ca-neutral-50);
--surface-card:var(--ca-neutral-0);
--surface-sunken:var(--ca-neutral-100);
--surface-sidebar:var(--ca-black);
--surface-inverse:var(--ca-neutral-900);
--text-body:var(--ca-neutral-900);
--text-secondary:var(--ca-neutral-600);
--text-muted:var(--ca-neutral-500);
--text-inverse:var(--ca-white);
--text-link:var(--ca-red);
--border-default:var(--ca-neutral-200);
--border-strong:var(--ca-neutral-300);
--accent:var(--ca-red);
--accent-hover:var(--ca-red-dark);
--accent-soft:var(--ca-red-light);
--focus-ring:0 0 0 3px rgba(176,42,40,.28);
}

/* tokens/typography.css */
:root{
--font-sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
--font-display:var(--font-sans);
--text-xs:11px;
--text-sm:13px;
--text-md:14px;
--text-lg:16px;
--text-xl:20px;
--text-2xl:24px;
--text-3xl:32px;
--leading-tight:1.2;
--leading-normal:1.5;
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
--tracking-caps:.06em;
}

/* tokens/spacing.css */
:root{
--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;
--radius-sm:4px;--radius-md:6px;--radius-lg:10px;--radius-pill:999px;
--control-h-sm:28px;--control-h-md:36px;--control-h-lg:44px;
--sidebar-w:240px;--topbar-h:56px;--content-max:1200px;
}

/* tokens/effects.css */
:root{
--shadow-sm:0 1px 2px rgba(22,21,20,.06);
--shadow-md:0 2px 8px rgba(22,21,20,.08),0 1px 2px rgba(22,21,20,.04);
--shadow-lg:0 12px 32px rgba(22,21,20,.14),0 2px 6px rgba(22,21,20,.06);
--ease-out:cubic-bezier(.2,.7,.2,1); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:180ms; /* @kind other */
}

/* tokens/base.css */
body{margin:0;font-family:var(--font-sans);font-size:var(--text-md);line-height:var(--leading-normal);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:none}a:hover{color:var(--accent-hover);text-decoration:underline}
*,*::before,*::after{box-sizing:border-box}