/* erikacary.com design system: tokens
   The single source for color, type, space, shape, depth and motion on the portfolio
   (home page, /work gate, audience pages, case studies). Kamira is out of scope.

   Extracted from style.css and work/work.css on main (2026-10-15), then revised with Erika
   (2026-10-16): text colors that reach 4.5:1, eight type sizes, no all caps. Names match the
   live site where it already had one (--paper, --ink, --rose ...). See README.md for the rules. */

:root {
    /* ---------- Color: base ---------- */
    --paper: #F9F4F6;           /* page background, warm rose-tinted */
    --surface: #FFFFFF;         /* inputs, frames and cards that sit on paper */
    --ink: #2B2130;             /* default text, primary button */
    --muted: #6E6072;           /* every secondary text: reading text, meta, nav, captions, cites. 5.4:1 */
    --rose: #B4547E;            /* the one accent, for fills and large text: buttons, arrows, cursor, curtain */
    --rose-text: #A44C73;       /* rose for text under 18px: labels, links, errors. 5.0:1 on paper, 4.5:1 on the wash */

    /* ---------- Color: lines and washes ---------- */
    --hairline: #E2D6DC;        /* frame borders */
    --border: #D5C4CD;          /* ghost button, input, dotted dividers, chart grid */
    --wash: #F2E8ED;            /* hover wash, empty media */
    --wash-deep: #E7D6DF;       /* far end of the media gradient */
    --wash-gradient: linear-gradient(135deg, var(--wash) 0%, var(--wash-deep) 100%);
    --paper-glass: rgba(249, 244, 246, 0.94);  /* sticky header bar, over an 8px blur */

    /* ---------- Color: case-study charts and controls ---------- */
    --rose-tint: #F6EAF0;       /* highlighted chart area */
    --neutral-tint: #ECEBEC;    /* de-emphasized chart area */
    --neutral: #7A7479;         /* de-emphasized chart label */
    --control-off-bg: #EFE9EC;  /* disabled arrow */
    --control-off-fg: #A69DA3;
    --control-pending: #8D7E91; /* the arrow about to turn the page while a carousel cycles. White icon: 3.8:1 */
    --stage-graphite: #2C2C2C;  /* behind dark UI screenshots that crossfade */
    --surface-veil: rgba(255, 255, 255, 0.55);  /* a placeholder sitting on the wash */

    /* Channels for tinted shadows and halos */
    --ink-rgb: 43, 33, 48;
    --rose-rgb: 180, 84, 126;

    /* Old names, kept so style.css, work.css and page styles keep working */
    --btn-border: var(--border);
    --btn-wash: var(--wash);
    --subtle: var(--muted);     /* was #8D7E91, too faint for text (3.5:1) */

    /* ---------- Type: families and weights ---------- */
    --font-display: 'Bricolage Grotesque', sans-serif;          /* names, titles, headings, quotes */
    --font-text: 'Schibsted Grotesk', system-ui, sans-serif;    /* reading text, UI and labels */

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 800;

    /* ---------- Type: sizes ----------
       Eight sizes. Fluid ones run from the min at phone width to the max on desktop. */
    --size-hero: min(112px, 14vw);              /* the home page name */
    --size-title: clamp(34px, 5vw, 56px);       /* page titles: audience pages, case studies, the gate */
    --size-heading: clamp(22px, 2.4vw, 30px);   /* tile and section titles, footer headline, home claims, home statement */
    --size-subheading: clamp(18px, 1.7vw, 21px);/* tile subheader, home role, page intro, quotes */
    --size-body-lg: clamp(17px, 1.6vw, 19px);   /* case-study reading text, home claim evidence */
    --size-body: 17px;                          /* facts, buttons, inputs */
    --size-small: 15px;                         /* nav, labels, meta lines, captions, cites */
    --size-fine: 12px;                          /* footer copy, "Copied" */
    --size-wordmark: 21px;                      /* "Erika Cary" in the nav: the subheading size, fixed */

    /* ---------- Type: line height ---------- */
    --leading-hero: 0.96;
    --leading-title: 1.04;
    --leading-heading: 1.15;
    --leading-snug: 1.3;
    --leading-quote: 1.4;
    --leading-statement: 1.42;
    --leading-text: 1.5;
    --leading-relaxed: 1.55;
    --leading-read: 1.6;

    /* ---------- Type: letter spacing ---------- */
    --tracking-display: -0.03em;    /* names and titles */
    --tracking-heading: -0.02em;    /* tile and section titles */
    --tracking-heading-sm: -0.015em;/* footer headline, claim title */
    --tracking-statement: -0.012em; /* home positioning line */
    --tracking-sub: -0.01em;        /* subheaders, quotes, fact labels */
    /* No all caps anywhere, so no wide label tracking */

    /* ---------- Space ----------
       A 4px grid. Half steps (6, 10, 14 ...) are optical offsets the site uses next to type. */
    --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-4-5: 18px;
    --space-5: 20px;
    --space-5-5: 22px;
    --space-6: 24px;
    --space-6-5: 26px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-11: 44px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;

    /* Fluid rhythm between big blocks */
    --space-page-top: clamp(64px, 10vh, 120px);     /* nav to the page intro */
    --space-statement-top: clamp(56px, 9vh, 110px); /* home hero to the positioning line */
    --space-claims-top: clamp(64px, 10vh, 104px);   /* positioning line to the claims */
    --space-tiles-top: clamp(64px, 10vh, 112px);    /* page intro to the first tile */
    --space-tiles: clamp(64px, 9vh, 112px);         /* between project tiles */
    --space-section: clamp(64px, 9vh, 104px);       /* between case-study sections */
    --space-quotes: clamp(80px, 12vh, 128px);       /* last tile to the quotes */
    --space-footer: clamp(72px, 12vh, 120px);       /* content to the footer */
    --space-block: clamp(36px, 5vw, 56px);          /* case-study title to hero, hero to story */
    --space-tile-body: clamp(24px, 3vw, 36px);      /* tile hero to its text */
    --space-hero-top: clamp(48px, 8vh, 96px);       /* home nav to the name */
    --space-cs-head: clamp(24px, 4vh, 40px);        /* back link to the case-study title */
    --gap-columns: clamp(28px, 5vw, 72px);          /* the 5:7 split's gutter */

    /* ---------- Layout ---------- */
    --content-max: 1200px;      /* every page */
    --intro-max: 860px;         /* page intro and case-study head */
    --reading-max: 720px;       /* paragraphs */
    --gate-max: 640px;          /* the password form: room for the 56px title on two lines */
    --lockup-max: 560px;        /* the footer lockup */
    --pad-x: clamp(24px, 6vw, 64px);
    --fact-label: 110px;        /* the label column in a facts list */
    /* Breakpoints (CSS can't read variables in media queries, so these are for reference):
       860px  two columns stack, dotted dividers appear
       700px  wide diagrams scroll sideways, charts reflow
       560px  fact labels sit above their text */

    /* ---------- Shape ---------- */
    --radius-pill: 999px;       /* buttons, inputs, hover washes */
    --radius-hero: 16px;        /* tile hero, wash panels */
    --radius-figure: 14px;      /* case-study figures, frames, placeholders, embeds */
    --radius-card: 12px;        /* a graphic or screenshot shown as a card */
    --radius-screen: 10px;      /* a desktop screen; often top corners only */
    --radius-control: 9px;      /* carousel arrows */
    --radius-phone: 22px;       /* a phone video or phone on the wash */
    --radius-phone-lg: 28px;    /* phones in a row */
    --radius-phone-frame: 11.5% / 5.3%; /* a phone recording, rounded in proportion to its own corners */
    --radius-phone-shot: 8.5% / 4.3%;   /* a phone screenshot with its own rounded corners */
    --radius-round: 50%;

    --border-width: 1px;
    --border-width-strong: 1.5px;   /* cursor ring, placeholder dash */

    /* ---------- Depth ---------- */
    --shadow-lift: 0 6px 18px rgba(var(--ink-rgb), 0.14);           /* hovered button */
    --shadow-soft: 0 10px 30px rgba(var(--ink-rgb), 0.10);          /* phones in a row */
    --shadow-float: 0 18px 48px rgba(var(--ink-rgb), 0.18);         /* screens on the wash */
    --shadow-float-strong: 0 18px 48px rgba(var(--ink-rgb), 0.22);  /* phones on the wash */
    --halo-rose: 0 0 0 5px rgba(var(--rose-rgb), 0.18);             /* a chart dot that is open */
    --focus-ring: 2px solid var(--rose);
    --focus-offset: 2px;

    --z-header: 10;
    --z-curtain: 50;
    --z-cursor: 9999;

    /* ---------- Motion ----------
       Rounded, never straight lines. Things fade and rise, wash in behind, or lift. */
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);     /* entrance, reveal, lifts, cursor */
    --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);  /* curtain rise and drop, gate recede */
    --ease-sweep: cubic-bezier(0.65, 0, 0.35, 1);   /* curtain covers the page */
    --ease-leave: cubic-bezier(0.7, 0, 0.2, 1);     /* curtain lifts off the top */
    --ease-spring: cubic-bezier(0.2, 0.8, 0.3, 1.1);/* letters in the home name */
    --ease-pop: cubic-bezier(0.45, 0, 0.25, 1);     /* a chart dot opening into a clip */

    --dur-micro: 180ms;         /* cursor fade */
    --dur-hover: 200ms;         /* color, wash, border */
    --dur-lift: 220ms;          /* button lift */
    --dur-underline: 320ms;     /* link underline draws in */
    --dur-cursor: 260ms;        /* cursor ring grows */
    --dur-header: 380ms;        /* home header bar slides in */
    --dur-crossfade: 500ms;     /* carousel slides */
    --dur-reveal-child: 600ms;  /* parts of a tile landing in turn */
    --dur-entrance: 640ms;      /* blocks on page load */
    --dur-reveal: 700ms;        /* blocks on scroll */
    --dur-curtain: 900ms;       /* curtain rise */
    --stagger: 70ms;            /* delay between blocks on entrance */
    --rise: 14px;               /* entrance travel */
    --rise-reveal: 24px;        /* scroll reveal travel */
    --dwell: 7000ms;            /* carousel time per slide */
}