/* ============================================
   DESIGN TOKENS
   Light mode. Dark mode backup in theme-dark.css.
   ============================================ */

@font-face {
  font-family: 'Perfectly Nineties';
  src: url('../assets/fonts/perfectly-nineties/PerfectlyNineties-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Perfectly Nineties';
  src: url('../assets/fonts/perfectly-nineties/PerfectlyNineties-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg:            #E8E5E1;
  --color-accent:        #67312b;
  --color-accent-subtle: color-mix(in srgb, var(--color-accent) 20%, var(--color-bg));
  --color-ink:           #303030;
  --color-ink2:           #67312b;
  --color-ink-secondary: #514e4e;
  --color-ink-label:     #595757;
  --color-border:        #bdbdbd;

  --noise-opacity: 0;

  --font-title:   'Perfectly Nineties', serif;
  --font-body:    'Mulish', system-ui, -apple-system, sans-serif;
  --font-display: 'SUSE Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-mono:    'SUSE Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — ratio 1.333 (Perfect Fourth), base 16px */
  --fs-label: 14px;   /* 16 ÷ 1.333        */
  --fs-text:  16px;   /* base               */
  --fs-h3:    22px;   /* 16 × 1.333        */
  --fs-h2:    clamp(26px, 4.5vw, 38px);  /* fluid on small screens */
  --fs-h1:    clamp(32px, 6vw, 50px);    /* fluid on small screens */

  --lh-text: 1.3;

  --sp-4:  4px;
  --sp-8:  8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;

  --container-md: 1200px;
  --container-lg: 1200px;
  --border: 1px solid var(--color-border);
  --radius: 8px;                     /* images, media frames, icon buttons */

  /* Warm hairline used under section headings */
  --color-rule: #c1a5a2;

  /* Accent-tinted image shadow — "floating" default + "flattened" hover state */
  --shadow-img:      0 13px 12px -10px color-mix(in srgb, var(--color-ink) 50%, transparent);
  --shadow-img-flat: 0 6px 12px -10px color-mix(in srgb, var(--color-ink) 45%, transparent);

  /* Darker accent used for the raised bottom edge of buttons */
  --shadow-btn-edge: color-mix(in srgb, var(--color-accent) 62%, #000);
}