/* Design tokens · values from Figma "Eden Portfolio · MASTER · 2026" (docs/shell-spec.md, section 3).
   Desktop is the default; tablet = max-width 900px, mobile = max-width 600px. */

:root {
  /* Color (text is never colored) */
  --color-bg-page: #ffffff;
  --color-bg-surface: #f4f4f2;
  --color-bg-ink: #0b0b0c;
  --color-text-primary: #0b0b0c;
  --color-text-secondary: #636369;
  --color-text-on-ink: #ffffff;
  --color-line-exact: #0b0b0c;
  --color-line-hand: #8e8e94;
  --color-line-guide: #d2d2d6;
  --color-line-on-photo: #ffffff;
  /* Case and work colors: shapes inside the work only */
  --color-case-cs1: #2563eb;
  --color-case-cs1-soft: #dce6fb;
  --color-case-cs2: #2563eb;
  --color-case-cs2-soft: #dce6fb;
  --color-case-cs3: #c1583a;
  --color-work-pressed: #1d4ed8;
  --color-work-danger: #e5533d;
  --color-work-danger-soft: #fce3de;
  --color-work-success: #16a34a;
  --color-work-success-soft: #dcf3e4;

  /* Space */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-140: 140px;

  /* Radius */
  --radius-xs: 2px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-tile: 14px;
  --radius-screen: 22px;
  --radius-bubble: 22px;
  --radius-tail: 4px;
  --radius-phone: 34px;
  --radius-wall: 40px;
  --radius-pill: 999px;

  /* Stroke (the site uses only --stroke-exact) */
  --stroke-exact: 1.6px;
  --stroke-hand: 1.4px;
  --stroke-guide: 1.2px;

  /* Layout · Desktop */
  --rh-chapter: 140px;
  --rh-section: 96px;
  --rh-block: 48px;
  --rh-element: 24px;
  --rh-tight: 12px;
  --in-xs-y: 4px;
  --in-xs-x: 8px;
  --in-s-y: 12px;
  --in-s-x: 20px;
  --in-m-y: 16px;
  --in-m-x: 24px;
  --in-l-y: var(--rh-block);
  --in-l-x: var(--rh-block);
  --in-page-x: max(40px, (100vw - 1360px) / 2); /* Update 5 Nov 2026 (Eden): the layout stops growing at 1440 and centres above it */
  --in-page-y: 32px;
  --grid-gutter: 24px;
  --knot-column: 56px;
  --thread-x: calc(var(--in-page-x) + var(--knot-column) / 2); /* 68 / 48 / 32 */
  --hero-col: 680px;
  --hero-lead: 560px;
  --nav-height: 92px;
  --nav-pill-y: 16px;
  --nav-pill-x: 32px;
  --nav-link-gap: 48px;

  /* Type sizes · Desktop */
  --type-hero: 122px;
  --type-case-hero: 84px;
  --type-end: 200px;
  --type-chapter: 56px;
  --type-case-title: 48px;
  --type-card-title: 28px;
  --type-bubble: 28px;
  --type-metric: 48px;
  --type-sub: 20px;
  --type-body: 16px;
  --type-body-strong: 17px;
  --type-caption: 13px;
  --type-button: 14px;
  --type-label: 11px;
  --type-nav-name: 26px;
  --type-nav-link: 19px;
  --type-nav-button: 17px;
  --type-end-word-space: 44px;
  --type-hero-word-space: 31px;
}

/* Tablet · 601–900 */
@media (max-width: 900px) {
  :root {
    --rh-chapter: 96px;
    --rh-section: 64px;
    --rh-block: 32px;
    --in-page-x: 32px;
    --grid-gutter: 20px;
    --knot-column: 32px;
    --hero-col: min(698px, 100% - 48px);
    --hero-lead: min(560px, 100% - 48px); /* up to 560; stays inside the hero column on narrow tablets */

    --type-hero: 80px;
    --type-case-hero: 56px;
    --type-end: 120px;
    --type-chapter: 40px;
    --type-case-title: 40px;
    --type-card-title: 22px;
    --type-bubble: 24px;
    --type-metric: 36px;
    --type-sub: 17px;
    --type-end-word-space: 27px;
    --type-hero-word-space: 20px;
  }
}

/* Mobile · up to 600 */
@media (max-width: 600px) {
  :root {
    --rh-chapter: 64px;
    --rh-section: 48px;
    --rh-block: 24px;
    --rh-element: 16px;
    --rh-tight: 8px;
    --in-m-x: 20px;
    --in-page-x: 20px;
    --grid-gutter: 16px;
    --knot-column: 24px;
    --hero-col: calc(100% - 24px);
    --hero-lead: calc(100% - 24px);
    --nav-height: 70px;
    --nav-pill-y: 12px;
    --nav-pill-x: 24px;
    --nav-link-gap: 32px; /* Figma Nav · Mobile uses 32, not the variable's 24 */

    --type-hero: 42px;
    --type-case-hero: 34px;
    --type-end: 68px;
    --type-chapter: 28px;
    --type-case-title: 26px;
    --type-card-title: 20px;
    --type-bubble: 20px;
    --type-metric: 28px;
    --type-sub: 16px;
    --type-body-strong: 16px;
    --type-nav-name: 20px;
    --type-nav-button: 15px;
    --type-end-word-space: 15px;
    --type-hero-word-space: 12px;
  }
}

/* Below 360 only: lets the mobile nav fit a 320 screen */
@media (max-width: 359px) {
  :root {
    --nav-link-gap: 16px;
    --nav-pill-x: 16px;
  }
}