/* Chad Rolinski portfolio — design tokens (canvas Version 21)
   One system. Desktop values below; the mobile block overrides only what changes. */
:root {
  /* Type */
  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --fs-display: 56px;    --lh-display: 1.05;   --ls-display: -0.035em;
  --fs-section: 40px;    --lh-section: 1.1;    --ls-section: -0.02em;
  --fs-card-title: 32px; --lh-card-title: 1.15; --ls-card-title: -0.02em;
  --fs-subsection: 28px; --lh-subsection: 1.2; --ls-subsection: -0.015em;
  --fs-heading: 24px;    --lh-heading: 1.3;    --ls-heading: -0.01em;
  --fs-title-lg: 22px;
  --fs-lede-lg: 22px;    --lh-lede-lg: 1.6;
  --fs-lede: 21px;       --lh-lede: 1.55;
  --fs-title: 20px;      --lh-title: 1.3;
  --fs-body: 18px;       --lh-body: 1.7;
  --fs-body-sm: 17px;    --lh-body-sm: 1.6;
  --fs-small: 16px;      --lh-small: 1.55;
  --fs-label: 15px;
  --fs-meta: 14px;
  --fs-fine: 13px;

  /* Spacing — each value has one job (HANDOFF.md) */
  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-24: 24px; --sp-32: 32px;
  --sp-48: 48px; --sp-64: 64px; --sp-80: 80px; --sp-96: 96px; --sp-120: 120px;

  /* Layout */
  --frame: 1440px; --margin: 120px; --margin-case: 176px;
  --cols: 12; --gutter: 24px; --reading: 760px; --header-h: 72px;
  --plate-inset: 32px; --plate-inset-lg: 56px;
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px;
  --tap: 44px;

  /* Color — light */
  --c-bg: #FFFFFF; --c-surface: #F4F5F7; --c-line: #E4E6EB; --c-line-strong: #CDD1D8;
  --c-ink: #0B0D12; --c-body: #2B313C; --c-muted: #5A6270;
  --c-accent: #00808A; --c-accent-fill: #14B8C4; --c-highlight: #F0F5F7; --c-highlight-ink: #0A4F55;
  --c-highlight-violet: #F3F2FA; --c-highlight-violet-ink: #3E2F96;
  --c-highlight-amber: #F8F4ED; --c-highlight-amber-ink: #6E4608;
  --c-button-fill: rgba(255,255,255,0.6);
  --c-linkedin: #0A66C2; --c-linkedin-hover-bg: rgba(10,102,194,0.08);

  /* Case plates: one neutral gradient for every case study */
  --plate: linear-gradient(135deg, #F5F6F8 0%, #ECEEF1 100%);
  --plate-dev-portal: var(--plate);
  --plate-ps-partners: var(--plate);
  --plate-resilience-hub: var(--plate);
  --plate-ai-workflow: var(--plate);
  --plate-console-studio: var(--plate);
  --plate-collab-app: var(--plate);

  /* Career timeline */
  --tl-kyocera: #F29E8E; --tl-qualcomm: #F5C26B; --tl-studio: #C77DDB;
  --tl-lowes: #7C9DF7; --tl-playstation: #9A88F4; --tl-aws: var(--c-accent-fill);

  /* Elevation and motion */
  --shadow-shot: 0 24px 48px -16px rgba(8,10,16,0.32), 0 8px 16px -8px rgba(8,10,16,0.16);
  --shadow-shot-hover: 0 36px 64px -18px rgba(8,10,16,0.38), 0 12px 22px -10px rgba(8,10,16,0.20);
  --ease-out: cubic-bezier(.22,1,.36,1);
}

[data-theme="dark"] {
  --c-bg: #0B0D12; --c-surface: #151821; --c-line: #232733; --c-line-strong: #3A4050;
  --c-ink: #F3F4F7; --c-body: #CDD2DB; --c-muted: #9BA3B1;
  --c-accent: #3FD8E0; --c-accent-fill: #1FC4CF; --c-highlight: #121E24; --c-highlight-ink: #E6F7F8;
  --c-highlight-violet: #181829; --c-highlight-violet-ink: #E7E3FF;
  --c-highlight-amber: #1E1A18; --c-highlight-amber-ink: #FBEBCF;
  --c-button-fill: rgba(255,255,255,0.06);
  --c-linkedin: #5AA7F2; --c-linkedin-hover-bg: rgba(10,102,194,0.22);
  --plate: linear-gradient(135deg, #2C303B 0%, #232731 100%);
  --tl-kyocera: #E0877A; --tl-qualcomm: #E3B25C; --tl-studio: #B774CC; --tl-lowes: #6C8FEA; --tl-playstation: #8A78EE;
}

/* Mobile: same system, scaled. Designed at 390 wide. */
@media (max-width: 767px) {
  :root {
    --fs-display: 34px; --fs-section: 28px; --fs-card-title: 24px; --fs-subsection: 22px;
    --fs-heading: 20px; --fs-title-lg: 19px; --fs-lede-lg: 19px; --fs-lede: 18px; --fs-body: 17px;
    --sp-32: 24px; --sp-48: 32px; --sp-64: 40px; --sp-80: 48px; --sp-96: 56px; --sp-120: 64px;
    --margin: 20px; --margin-case: 20px; --cols: 4; --gutter: 16px; --header-h: 64px;
    --plate-inset: 16px; --plate-inset-lg: 20px;
  }
}