/* ============================================================
Pooja Sinha Portfolio — Design tokens
Colors, type, spacing, radii and motion — extracted verbatim
from the Claude Design source. One display size, one text size,
seven flat colours, hairline dashed rules. No tints, no shadows.
============================================================ */
/* Fonts are loaded via + in each page's
(not @import here) so the browser can start fetching them
immediately instead of waiting for this CSS to parse. */
:root {
/* the folio is light-only: keeps dark-mode browsers from painting a
dark canvas in the overscroll area past the footer */
color-scheme: light;
/* --- Colours (flat, fully opaque section fields) --- */
--ink: #232324;
--paper: #f5f5f5;
--white: #ffffff;
--black: #000000;
--sand: #f4ebd8;
--violet: #532feb;
--green: #009330;
--pink: #e0679e;
--pink-deep: #7d2a50;
--maroon: #8a2d3b;
--maroon-light: #c9727e;
--charcoal: #3d3a36;
--teal: #008280; /* case-study accents (component titles) */
--teal-deep: #0b2934; /* Qure outcome card field */
--mint: #dcf2f2; /* experience section field */
--ink-soft: #666666; /* secondary body text */
--gray-line: #ededed; /* hairline fills / mock UI bars */
/* semantic aliases */
--text-primary: var(--ink);
--text-inverse: var(--white);
--text-name: var(--black);
--surface-card: var(--paper);
--stroke-ink: var(--ink);
--stroke-inverse: var(--white);
/* --- Families --- */
--font-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-text: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* --- Weights --- */
--weight-regular: 400;
--weight-medium: 500;
/* --- Sizes --- */
--size-display: 84px;
--size-text: 14px;
--size-body: 14px;
/* --- Line heights --- */
--leading-display: 94px;
--leading-display-tight: 94px;
--leading-text: 100%;
--leading-body: 28px;
/* --- Tracking --- */
--tracking-display: -0.04em;
--tracking-text: 0;
/* --- Composite text-style tokens --- */
--text-hero: var(--weight-regular) var(--size-display)/var(--leading-display) var(--font-display);
--text-section-title: var(--weight-regular) var(--size-display)/var(--leading-display-tight) var(--font-display);
--text-label: var(--weight-regular) var(--size-text)/var(--leading-text) var(--font-text);
--text-name: var(--weight-medium) var(--size-text)/var(--leading-text) var(--font-text);
--text-body: var(--weight-regular) var(--size-body)/var(--leading-body) var(--font-body);
/* --- Spacing / layout --- */
--edge-gutter: 24px;
--col-width: 672px;
/* --- Radii (scale: 8 · 12 · 20 · 24 · 32 · 40) --- */
--radius-avatar: 8px;
--radius-xs: 12px;
--radius-md: 20px;
--radius-lg: 24px;
--radius-card: 32px;
--radius-pill: 40px;
/* --- Rules --- */
--rule-width: 1px;
--rule-style: dashed;
/* --- Motion --- */
--dur-1: 0.14s;
--dur-2: 0.32s;
--dur-3: 0.55s;
--dur-4: 0.9s;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
--ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
--stagger: 0.08s;
}