:root {
  --shell-bg: #E6E6E3;
  --frame-bg: #F5F5F3;
  --warm-white: #F5F5F3;
  --white: #FFFFFF;
  --ink: #111111;
  --ink-body: #5F6368;
  --ink-muted: #656A70;
  --yellow: #FBBC05;
  --orange: #FF6D01;
  --coral: #EA4335;
  --blue: #4285F4;
  --green: #34A853;
  --violet-accent: #A142F4;
  --teal-accent: #0F9D9B;
  --lavender: #EFE6FB;
  --lavender-line: #E2D2F5;
  --lavender-tint: #F7F1FD;
  --ink-violet: #6A2BA8;
  --eyebrow-violet: #7B33BF;
  --soft-yellow: #FEF7E0;
  --soft-yellow-line: #F5E6B8;
  --yellow-ink: #5C4800;
  --yellow-body: #6B5500;
  --yellow-card-line: #F0E4BC;
  --line: #DEDEDA;
  --line-soft: #E6E6E2;
  --line-faint: #EDEDE9;
  --grid-line: #E9E9E5;
  --neutral-chip: #F0F0ED;
  --on-yellow-body: #3D3000;

  --eyebrow-on-lavender: #6A2BA8;
  --eyebrow-on-soft-yellow: #6B5500;
  --muted-on-lavender: #5F6368;
  --coral-ink: #C5221F;

  --tint-web: #EAF1FE;    --stroke-web: #4285F4;
  --tint-apps: #E8F5EA;   --stroke-apps: #34A853;
  --tint-uiux: #FDECEA;   --stroke-uiux: #EA4335;
  --tint-brand: #FEF1DE;  --stroke-brand: #F29900;
  --tint-growth: #F3E8FD; --stroke-growth: #A142F4;
  --tint-custom: #EFEFEC; --stroke-custom: #111111;
  --tint-ai: #FEF7E0;     --stroke-ai: #FBBC05;
  --tint-qa: #E6F4F3;     --stroke-qa: #0F9D9B;

  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-ui: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, Menlo, Consolas, monospace;
  --font-label: var(--font-ui);

  --t-h1: clamp(34px, 5vw, 68px);
  --t-h2-major: clamp(27px, 3.4vw, 46px);
  --t-h2: clamp(24px, 2.9vw, 38px);
  --t-h2-work: clamp(26px, 3.3vw, 45px);
  --t-statement: clamp(26px, 3.3vw, 44px);
  --t-quote: clamp(19px, 2.2vw, 30px);
  --t-h3-lg: clamp(19px, 1.9vw, 25px);
  --t-h3-sm: clamp(16.5px, 1.4vw, 19px);
  --t-svc-lg: clamp(19px, 1.9vw, 25px);
  --t-svc-wide: clamp(18px, 1.7vw, 23px);
  --t-svc-md: clamp(17px, 1.5vw, 20px);
  --t-h3-article: 16.5px;
  --t-lead: clamp(15px, 1.2vw, 17px);
  --t-card: 13.5px;
  --t-eyebrow: 11px;
  --t-footer-head: 11px;
  --t-nav: 14px;
  --t-btn: 14px;
  --t-btn-lg: 15px;
  --t-label: 11px;
  --t-input: 14.5px;

  --container: 1180px;
  --container-pad: clamp(20px, 3.4vw, 44px);
  --frame-pad: clamp(10px, 1.4vw, 20px);
  --section-y: clamp(44px, 5.4vw, 86px);
  --section-y-tight: clamp(34px, 4vw, 58px);
  --section-y-statement: clamp(48px, 6vw, 96px);
  --header-h: 80px;
  --hero-top: clamp(30px, 4vw, 62px);
  --gap-sm: clamp(10px, 1.1vw, 15px);
  --gap-md: clamp(13px, 1.5vw, 19px);
  --gap-col: clamp(24px, 3.4vw, 54px);

  --r-pill: 999px;
  --r-frame: clamp(20px, 2.8vw, 38px);
  --r-panel: 22px;
  --r-section: 24px;
  --r-hero-card: 22px;
  --r-service: 20px;
  --r-step: 18px;
  --r-card: 18px;
  --r-chip: 14px;
  --r-input: 12px;
  --r-mock: 10px;

  --border: 1px solid var(--line);
  --border-ink: 1.5px solid #111111;

  --sh-card: 0 10px 30px -18px rgba(17, 17, 17, .22);
  --sh-project: 0 18px 44px -26px rgba(17, 17, 17, .26);
  --sh-hero: 0 26px 60px -32px rgba(17, 17, 17, .28);
  --sh-mega: 0 24px 56px -28px rgba(17, 17, 17, .22);
  --sh-coral: 0 12px 24px -14px rgba(234, 67, 53, .6);
  --sh-form: 0 14px 38px -22px rgba(17, 17, 17, .25);
  --sh-badge: 0 10px 24px -14px rgba(17, 17, 17, .3);
  --sh-sticker: 0 8px 20px -12px rgba(17, 17, 17, .3);
  --sh-lift: 0 18px 44px rgba(17, 17, 17, .11);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: .22s var(--ease);
  --t-enter: .65s var(--ease);
  --t-mid: .26s var(--ease);
  --t-slow: .5s var(--ease);

  --z-nav: 100;
  --z-rail: 104;
  --z-float: 105;
  --z-float-panel: 106;
  --z-menu: 110;
  --z-modal: 130;
  --z-toast: 140;
  --z-admin: 999;

  --paper: var(--frame-bg);
  --paper-2: var(--white);
  --paper-3: #F0F0ED;
  --ink-2: var(--ink-body);
  --ink-3: #5F6368;
  --ink-4: var(--ink-muted);
  --rule: var(--line);
  --rule-dashed: #D4D4CF;
  --shell: var(--container);
  --shell-text: 760px;
  --gutter: var(--container-pad);
  --gutter-sm: 20px;
  --nav-h: var(--header-h);
  --w-heavy: 800;
  --w-display: 800;
  --t-body: var(--t-lead);
  --t-hero: var(--t-h1);
  --t-section: var(--t-h2-major);
  --t-sub: var(--t-h2);
  --t-chapter: var(--t-h2-work);
  --step--1: var(--t-card);
  --step-0: var(--t-lead);
  --step-1: var(--t-h3-sm);
  --step-2: var(--t-h3-lg);
  --step-3: var(--t-h2);
  --step-4: var(--t-h2-major);
  --step-5: var(--t-h1);
  --r-sm: var(--r-mock);
  --r-md: var(--r-input);
  --r-lg: var(--r-chip);
  --r-xl: var(--r-card);
  --r-2xl: var(--r-service);
  --pop-1: 0 1px 2px rgba(17, 17, 17, .05);
  --pop-2: var(--sh-card);
  --pop-3: var(--sh-project);
  --pop-4: var(--sh-hero);
  --pop-soft: var(--sh-mega);
  --hair: var(--border);
  --coral-deep: #C5221F;
  --coral-on-white: var(--coral-ink);
  --coral-tint: var(--tint-uiux);
  --blue-deep: #1765CC;
  --blue-deeper: #1557B0;
  --blue-tint: var(--tint-web);
  --green-tint: var(--tint-apps);
  --orange-tint: var(--tint-brand);
  --yellow-soft: var(--soft-yellow);
  --yellow-rule: var(--soft-yellow-line);
  --lavender-rule: var(--lavender-line);
  --lavender-ink: var(--ink-violet);
  --violet: #4285F4;
  --violet-deep: var(--blue-deep);
  --violet-tint: var(--tint-web);
  --violet-soft: #A8C7FA;
  --brand: var(--blue);
  --brand-deep: var(--blue-deep);
  --brand-sky: #A8C7FA;
  --brand-tint: var(--tint-web);
  --brand-wash: #F4F8FE;
  --teal: #0F9D9B;
  --teal-deep: #0B7572;
  --teal-soft: #7FCBC9;
  --teal-tint: var(--tint-qa);
  --lime: #FBBC05;
  --lime-deep: var(--yellow-ink);
  --lime-soft: #FDE293;
  --lime-tint: var(--soft-yellow);
  --amber: #F29900;
  --amber-deep: #8A6D00;
  --amber-tint: var(--soft-yellow);
  --pink: #EA4335;
  --pink-deep: var(--coral-ink);
  --pink-soft: #F6AEA9;
  --pink-tint: var(--tint-uiux);
  --orange-deep: #9A4200;
  --orange-darkest: #7A3400;
  --orange-soft: #FFC08A;
  --blush: var(--tint-uiux);
  --blush-deep: var(--coral-ink);
  --peach: var(--tint-brand);
  --peach-deep: #8A5300;
  --green-soft: #A8DAB5;
  --green-deep: #188038;
  --section-y-lg: var(--section-y-statement);

  --f-fg: #FFFFFF;
  --f-bg: #0E0E0E;
  --f-dim: #C2C7CD;
  --f-dim2: #8B9199;
  --f-line: #262626;
  --f-card: #141414;
  --f-accent: #8AB4F8;

  color-scheme: light;
}
