/* PM Portfolio Design System — v1.0 · Editorial ("sage & paper")
 * Design tokens. Link this file and build with var(--token) references.
 * Source: Claude Design project "PM Portfolio Design System".
 * Palette derived from the dappled-sage hero background. */

:root {
  /* ---- color ---- */
  --color-primary:        #54654C;   /* olive — links, CTAs, accents */
  --color-secondary:      #48513F;   /* deep sage — nav, emphasis */
  --color-accent:         #9AA18D;   /* muted sage — index numbers, hairlines */
  --color-accent-tint:    #DFE6D2;   /* chips, highlights */
  --color-bg:             #F7F5F1;   /* page background */
  --color-paper:          #F2F1E8;   /* paper surface */
  --color-surface:        #FAF9F2;   /* card surface */
  --color-surface-alt:    #F3F2E8;   /* alt surface */
  --color-text:           #3A4136;   /* primary text — 10.8:1 on bg */
  --color-text-body:      #4C5346;   /* body text — 8.1:1 */
  --color-text-muted:     #767E6C;   /* muted text — 4.6:1 */
  --color-border:         #D8D6C6;   /* hairline */
  --color-success:        #5C7150;
  --color-warning:        #B08A3E;
  --color-error:          #9C4B3B;
  --overlay-paper:        rgba(242, 241, 232, .55); /* dark text on photo: 15%->55% */
  --overlay-dark:         rgba(24, 29, 20, .70);     /* light text on photo: 15%->70% */

  /* ---- typography ---- */
  --font-serif:  'Cormorant', Georgia, serif;
  --font-sans:   Helvetica, Arial, sans-serif;
  --font-mono:   'IBM Plex Mono', monospace;
  --text-display: 300 64px/1.0  var(--font-serif);
  --text-h1:      400 44px/1.05 var(--font-serif);
  --text-h2:      400 34px/1.1  var(--font-serif);
  --text-h3:      500 26px/1.2  var(--font-serif);
  --text-h4:      700 20px/1.25 var(--font-sans);
  --text-body:    400 16px/1.75 var(--font-sans);
  --text-small:   400 13px/1.6  var(--font-sans);
  --text-label:   500 10px/1.4  var(--font-mono);
  --text-nav:     400 13px/1    var(--font-sans);
  --tracking-label: .26em;
  --tracking-nav:   .22em;

  /* ---- spacing (4px base) ---- */
  --space-xs: 4px;   --space-sm: 8px;   --space-md: 16px;
  --space-lg: 24px;  --space-xl: 40px;  --space-2xl: 64px;
  --space-3xl: 88px;

  /* ---- sizing & layout ---- */
  --container-max: 1200px;
  --measure:       720px;   /* reading measure */
  --page-margin:   64px;    /* desktop; tablet 40px; mobile 20px */
  --grid-cols:     12;
  --grid-gutter:   24px;

  /* ---- radius / border / shadow / opacity ---- */
  --radius-sm: 4px;  --radius-md: 6px;  --radius-lg: 10px;
  --border-hairline: 1px solid var(--color-border);
  --shadow-card: 0 12px 32px rgba(60, 72, 52, .14);
  --shadow-text: 0 1px 24px rgba(60, 72, 52, .35);   /* display text on imagery */
  --opacity-disabled: .4;

  /* ---- motion ---- */
  --motion-micro:  160ms;   /* hover */
  --motion-ui:     240ms;   /* ui transition */
  --motion-reveal: 500ms;   /* scroll reveal */
  --ease-standard: cubic-bezier(.2, .6, .2, 1);

  /* ---- breakpoints ---- */
  --bp-mobile:  640px;
  --bp-tablet:  1024px;
  --bp-desktop: 1280px;

  /* ---- z-index ---- */
  --z-base: 0;  --z-sticky: 100;  --z-nav: 200;  --z-overlay: 300;  --z-modal: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-micro: 0ms;
    --motion-ui: 0ms;
    --motion-reveal: 0ms;
  }
}