/**
 * tokens.css — Design System Tokens (docs/design-system.md)
 * Single source of styling. All other CSS files import or reference these vars.
 */

@font-face {
  font-family: 'DM Serif Display';
  src: url('/assets/fonts/dm-serif-display-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('/assets/fonts/dm-serif-display-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/dm-sans-variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Colors ── */
  --color-canvas:        #FAFAF8;
  --color-surface-0:     #FAFAF8;
  --color-surface-1:     #F4F3EF;
  --color-surface-2:     #ECEAE3;
  --color-ink:           #1A1917;
  --color-ink-secondary: #2E2C29;

  --color-text-primary:       #1A1917;
  --color-text-secondary:     #5C5A55;
  --color-text-tertiary:      #8A8780;
  --color-text-inverse:       #FAFAF8;
  --color-text-inverse-muted: #C8C5BE;

  --color-accent:        #1D6A6A;
  --color-accent-hover:  #155252;
  --color-accent-subtle: #E8F2F2;
  --color-accent-on-dark:#4DB8B8;

  --color-amber:         #B8620A;
  --color-amber-subtle:  #FDF3E7;

  --color-success:       #1A7340;
  --color-success-subtle:#E6F4EC;
  --color-error:         #C0392B;
  --color-error-subtle:  #FDECEA;
  --color-warning:       #8A5700;
  --color-warning-subtle:#FEF3E2;

  --color-border:        #DDDBD4;
  --color-border-strong: #B8B6B0;
  --color-border-inverse:#3A3835;

  /* ── Typography ── */
  --font-display: 'DM Serif Display', 'Georgia', serif;
  --font-body:    'DM Sans', 'system-ui', '-apple-system', sans-serif;

  --text-display-xl:  4rem;       /* 64px — home hero H1 desktop */
  --text-display-lg:  3rem;       /* 48px — section hero H1 desktop */
  --text-display-md:  2.25rem;    /* 36px — H2 section headings */
  --text-display-sm:  1.75rem;    /* 28px — H3 in cards */
  --text-heading-lg:  1.375rem;   /* 22px — H3 in components */
  --text-heading-md:  1.125rem;   /* 18px — H4, card titles */
  --text-heading-sm:  1rem;       /* 16px — H5, label headings */
  --text-body-lg:     1.125rem;   /* 18px — lead/intro paragraphs */
  --text-body-md:     1rem;       /* 16px — default body */
  --text-body-sm:     0.875rem;   /* 14px — captions, metadata */
  --text-sm:          0.875rem;   /* alias for text-body-sm */
  --text-xs:          0.75rem;    /* 12px — micro labels, eyebrows */
  --text-label-md:    0.8125rem;  /* 13px — badges, tags */
  --text-label-sm:    0.6875rem;  /* 11px — fine print */

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Radii ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Borders ── */
  --border-width:       1px;
  --border-width-thick: 2px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(26,25,23,0.08), 0 1px 2px rgba(26,25,23,0.06);
  --shadow-md: 0 4px 12px rgba(26,25,23,0.12), 0 2px 4px rgba(26,25,23,0.08);
  --shadow-lg: 0 12px 32px rgba(26,25,23,0.16), 0 4px 8px rgba(26,25,23,0.10);

  /* ── Breakpoints (for reference; use in media queries) ── */
  /* --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; */
}