/**
 * Design tokens from Figma: website / styleguide (node 1:184)
 * https://www.figma.com/design/hdDlT8QoplKHpXNgtWAeVo/website?node-id=1-184
 */

:root {
  /* Chrome padding — header bar; footer bar uses same horizontal inset as header */
  --chrome-header-padding-inline: 20px;
  --chrome-footer-padding-block: 24px;

  /* Mobile: header + main + footer horizontal inset */
  --layout-page-inline-mobile: 16px;

  /* Case study template: full-width shell vs reading column (matches layout max 1200) */
  --layout-case-study-shell: 1200px;
  --layout-case-study-prose: 720px;

  /*
   * Sticky nav pill — translucent glass (more see-through + heavy blur + saturation).
   */
  --chrome-glass-fill: rgba(255, 255, 255, 0.38);
  --chrome-glass-border: rgba(255, 255, 255, 0.42);
  --chrome-glass-blur: 56px;
  --chrome-glass-saturate: 200%;
  --chrome-glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.035), 0 12px 36px rgba(0, 0, 0, 0.03);
  --chrome-glass-fill-fallback: rgba(255, 255, 255, 0.92);

  /* Colors — matches Figma variables */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-grey-700: #6e6e73;
  --color-grey-400: #e2e2e2;
  --color-grey-100: #f4f4f4;
  --color-grey-00: #f9f9f9;
  /* Full-page canvas behind white surfaces (cards, header strip) */
  --color-page-bg: var(--color-grey-00);
  /*
   * Figma Works card — single-layer reference (optional)
   */
  --shadow-color-elevation: rgb(0 0 0 / calc(8 / 255));
  --shadow-card-figma: 0 10px 20px 0 var(--shadow-color-elevation);

  /*
   * Product cards — matched to Apple Store Online (UK) tile shadow
   * store-home.css .rf-ccard-content / hover (rs-merch ~4.15.x)
   * https://www.apple.com/uk/store
   */
  --shadow-card: 2px 4px 12px rgb(0 0 0 / calc(20 / 255)); /* #00000014 */
  --shadow-card-hover: 2px 4px 16px rgb(0 0 0 / calc(41 / 255)); /* #00000029 */

  /*
   * Icons on light backgrounds — align with Figma secondary/muted text (grey-700).
   * Use --color-icon for default (e.g. nav on white); --color-icon-muted for UI glyphs.
   */
  --color-icon: var(--color-black);
  --color-icon-muted: var(--color-grey-700);

  /* Typography — SF Pro on Apple; explicit fallbacks so non-Apple doesn’t look “off” */
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* Portfolio/H1 */
  --text-h1-family: var(--font-display);
  --text-h1-size: 40px;
  --text-h1-weight: 600;
  --text-h1-line-height: 48px;
  --text-h1-letter-spacing: 0;

  /* Portfolio/H2 — SF Pro Display Semibold 32 / 40, tracking 1% */
  --text-h2-family: var(--font-display);
  --text-h2-size: 32px;
  --text-h2-weight: 600;
  --text-h2-line-height: 40px;
  --text-h2-letter-spacing: 0.01em;

  /* Portfolio/H3 — former H2 (display 20 / 24, 1% tracking) — project cards, etc. */
  --text-h3-family: var(--font-display);
  --text-h3-size: 20px;
  --text-h3-weight: 600;
  --text-h3-line-height: 24px;
  --text-h3-letter-spacing: 0.01em;

  /* Portfolio/H4 — former H3 (Inter wordmark, compact list headings) */
  --text-h4-family: var(--font-text);
  --text-h4-size: 16px;
  --text-h4-weight: 600;
  --text-h4-line-height: 20px;
  --text-h4-letter-spacing: 0;

  /* Portfolio/Body 1 */
  --text-body-1-family: var(--font-text);
  --text-body-1-size: 16px;
  --text-body-1-weight: 400;
  /* Slightly relaxed vs strict 1.2 from Figma — reads cleaner on the web */
  --text-body-1-line-height: 24px;
  --text-body-1-letter-spacing: 0;

  /*
   * Primary pill nav (About / Works / Highlights) — body scale, medium (500) weight.
   */
  --text-chrome-nav-pill-family: var(--text-body-1-family);
  --text-chrome-nav-pill-size: var(--text-body-1-size);
  --text-chrome-nav-pill-weight: 500;
  --text-chrome-nav-pill-line-height: var(--text-body-1-line-height);
  --text-chrome-nav-pill-letter-spacing: var(--text-body-1-letter-spacing);

  /* Long-form blocks (intro, case studies) */
  --text-prose-line-height: 1.5;
}