/* ============================================================
   Deep Sea Fauna — Design Tokens
   CSS custom properties: colors, type, spacing, layout
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-variable.woff2') format('woff2'),
       url('/fonts/fraunces-variable.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dm-sans-variable.woff2') format('woff2'),
       url('/fonts/dm-sans-variable.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Mono';
  src: url('/fonts/dm-mono-regular.woff2') format('woff2'),
       url('/fonts/dm-mono-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Colors ── */
  --color-primary:        #1e2a28;   /* deep charcoal-teal (replaces navy) */
  --color-primary-light:  #2e3f3c;   /* lifted charcoal-teal */
  --color-primary-dark:   #111a18;   /* darkest ink */
  --color-bg:             #fcfaf6;   /* light warm white (page + shell) */
  --color-bg-alt:         #f3efe6;   /* subtle stripe / cards: still light, more separation than bg */
  --color-bg-dark:        #1e2a28;   /* dark charcoal surface */
  --color-accent:         #3d8c87;   /* teal/seafoam from 2nd panel */
  --color-accent-light:   #52a9a3;   /* lighter teal */
  --color-cta:            #c0392b;   /* bold red/rust circle */
  --color-cta-light:      #d95a4a;   /* lifted red */
  --color-cta-dark:       #a02d22;   /* deep red */
  --color-success:        #8a7d32;   /* muted ochre/gold (3rd panel circle) */
  --color-text:           #050505;   /* body + headings on light backgrounds: maximum readable contrast */
  --color-text-light:     #2a2926;   /* muted / secondary: still clearly darker than mid-gray on light bg */
  --color-text-placeholder: #5a5854; /* inputs: readable placeholders without extra opacity hacks */
  --color-text-on-dark:   #f7f5f0;   /* cream on dark surfaces (aligns with lightened page cream) */
  --color-text-on-dark-muted: rgba(247, 245, 240, 0.82); /* secondary line on dark bars (trust strip, etc.) */
  --color-border:         #c9c4b8;   /* slightly stronger border on lighter bg */
  --color-border-dark:    #3a4f4b;   /* teal-gray border on dark */
  --color-error:          #b91c1c;   /* stays strong red for errors */
  --color-white:          #ffffff;

  /* ── Typography ── */
  --font-heading: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'Courier New', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3.25rem;

  --line-height-body:    1.6;
  --line-height-heading: 1.15;
  --line-height-tight:   1.05;

  /* ── Spacing (8px base) ── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ── Layout ── */
  --layout-max:         min(1360px, 92vw);
  --max-width:          1360px;
  --max-width-narrow:   720px;
  --content-padding-x:  clamp(1rem, 4vw, 3rem);
  --gutter-bg:          var(--color-bg); /* viewport edges match page (single light field) */

  /* ── Radii ── */
  --radius:    6px;
  --radius-lg: 10px;
  --radius-xl: 16px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(11, 29, 58, 0.06);
  --shadow-md: 0 4px 12px rgba(11, 29, 58, 0.08);
  --shadow-lg: 0 8px 24px rgba(11, 29, 58, 0.12);
  --shadow-xl: 0 16px 40px rgba(11, 29, 58, 0.16);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Z-index ── */
  --z-base:    1;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
  --z-skip:    9999;
}