/* die.moneyboys — Colors & Typography Tokens
   v1.0 · April 2026
   Source of truth: die-moneyboys-design-system.md
*/

/* ── Inter — local files (fonts/Inter_*.ttf) ───────────────────────────
   Brand spec sanctions only weights 400 (Regular) and 500 (Medium).
   Italic is loaded for quotes only. We use the 18pt optical size as the
   default — it is Inter's general-purpose master.
   ─────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Inter_18pt-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Inter_18pt-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Inter_18pt-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Inter_18pt-MediumItalic.ttf') format('truetype');
}

:root {
  /* ─────────────────────────────────────────────────────────────────
     TYPOGRAPHY
     ───────────────────────────────────────────────────────────────── */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Weights — only two */
  --fw-regular: 400;
  --fw-medium:  500;

  /* Size scale */
  --fs-display:  56px;
  --fs-h1:       40px;
  --fs-h2:       28px;
  --fs-h3:       20px;
  --fs-body-l:   18px;
  --fs-body-m:   16px;
  --fs-label:    13px;
  --fs-overline: 11px;

  /* Letter-spacing */
  --ls-display:  -0.03em;
  --ls-h1:       -0.025em;
  --ls-h2:       -0.02em;
  --ls-h3:       -0.015em;
  --ls-overline:  0.10em;

  /* Line-heights */
  --lh-heading:    1.1;
  --lh-subheading: 1.2;
  --lh-body:       1.65;
  --lh-label:      1.5;

  /* ─────────────────────────────────────────────────────────────────
     COLORS — Brand
     ───────────────────────────────────────────────────────────────── */
  --color-black:        #111111;
  --color-black-soft:   #1A1A1A;
  --color-black-light:  #222222;
  --color-gold:         #C9A84C;
  --color-gold-deep:    #B8922E;
  --color-gold-light:   #DFC278;
  --color-gold-active:  #A07A20;
  --color-white:        #FFFFFF;
  --color-creme:        #F5F0E8;

  /* Warm neutral grays */
  --gray-50:  #F7F5F0;
  --gray-100: #E8E4DC;
  --gray-200: #C8C4BB;
  --gray-400: #9A9690;
  --gray-500: #6B6760;
  --gray-700: #3F3D38;
  --gray-800: #2A2825;
  --gray-900: #1A1917;

  /* Semantic */
  --color-success:      #2D7D4F;
  --color-success-bg:   #0D2B1A;
  --color-success-text: #E8F5EE;
  --color-warning:      #C9850C;
  --color-warning-bg:   #2B1F08;
  --color-warning-text: #FDF3DC;
  --color-error:        #C93030;
  --color-error-bg:     #2B0D0D;
  --color-error-text:   #FDE8E8;
  --color-info:         #2A7FAD;
  --color-info-bg:      #0D1E2B;
  --color-info-text:    #E0F0F9;

  /* Surfaces — Dark */
  --surface-base:      #111111;
  --surface-1:         #1A1A1A;
  --surface-2:         #222222;
  --surface-3:         #2A2A2A;
  --surface-gold-tint: #1A1714;
  --border-default:    #3F3D38;
  --border-gold:       rgba(201, 168, 76, 0.20);
  --border-gold-hover: rgba(201, 168, 76, 0.40);

  /* Surfaces — Document (Light / PDF / Email) */
  --doc-bg:             #F5F0E8;
  --doc-surface:        #FFFFFF;
  --doc-surface-2:      #EDE7D9;
  --doc-gold-tint:      rgba(201, 168, 76, 0.10);
  --doc-border:         rgba(0, 0, 0, 0.12);
  --doc-text-primary:   #1A1917;
  --doc-text-secondary: #6B6760;

  /* Foreground tokens (dark mode) */
  --fg-1: #FFFFFF;            /* primary text */
  --fg-2: #C8C4BB;            /* secondary text */
  --fg-3: #6B6760;            /* tertiary / hint */
  --fg-accent: #C9A84C;       /* gold accent */

  /* Gradients (use max 1 per page) */
  --grad-gold-shine:  linear-gradient(135deg, #C9A84C 0%, #DFC278 50%, #C9A84C 100%);
  --grad-dark-fade:   linear-gradient(180deg, #1A1A1A 0%, #111111 100%);
  --grad-img-overlay: linear-gradient(180deg, transparent 0%, #111111 100%);
  --grad-gold-tint:   linear-gradient(135deg, #111111 0%, #1A1714 100%);

  /* ─────────────────────────────────────────────────────────────────
     SPACING (8px base)
     ───────────────────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ─────────────────────────────────────────────────────────────────
     RADII
     ───────────────────────────────────────────────────────────────── */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-full: 50%;

  /* ─────────────────────────────────────────────────────────────────
     MOTION
     ───────────────────────────────────────────────────────────────── */
  --ease-standard:   cubic-bezier(.4, 0, .2, 1);
  --ease-decelerate: cubic-bezier(0, 0, .2, 1);
  --ease-accelerate: cubic-bezier(.4, 0, 1, 1);
  --ease-smooth:     ease-in-out;

  --duration-micro:    75ms;
  --duration-instant:  100ms;
  --duration-fast:     150ms;
  --duration-standard: 200ms;
  --duration-moderate: 300ms;
  --duration-slow:     400ms;
  --duration-max:      500ms;

  --transition-fast:     all 150ms cubic-bezier(.4,0,.2,1);
  --transition-standard: all 200ms cubic-bezier(.4,0,.2,1);
  --transition-moderate: all 300ms cubic-bezier(.4,0,.2,1);
  --transition-slow:     all 400ms cubic-bezier(.4,0,.2,1);

  /* ─────────────────────────────────────────────────────────────────
     LAYOUT
     ───────────────────────────────────────────────────────────────── */
  --bp-mobile:  480px;
  --bp-tablet:  768px;
  --bp-desktop: 1280px;
  --max-width-content: 1120px;
  --max-width-text:     680px;
  --max-width-narrow:   480px;

  /* ─────────────────────────────────────────────────────────────────
     ICONS
     ───────────────────────────────────────────────────────────────── */
  --icon-xs:   12px;
  --icon-sm:   16px;
  --icon-md:   20px;
  --icon-lg:   24px;
  --icon-xl:   32px;
  --icon-2xl:  40px;
  --icon-3xl:  48px;
  --icon-stroke: 1.5px;
  --icon-primary:   #C9A84C;
  --icon-secondary: #9A9690;
  --icon-muted:     #6B6760;
  --icon-on-gold:   #111111;

  /* ─────────────────────────────────────────────────────────────────
     LOGO
     ───────────────────────────────────────────────────────────────── */
  --logo-font:       'Inter', -apple-system, sans-serif;
  --logo-weight:     500;
  --logo-ls:         -0.02em;
  --logo-die-dark:   #C9A84C;
  --logo-die-light:  #B8922E;
  --logo-name-dark:  #FFFFFF;
  --logo-name-light: #1A1917;
  --logo-line:       #C9A84C;
  --logo-line-width: 1.2px;
}

/* ─────────────────────────────────────────────────────────────────
   BASE TYPE — semantic helpers (use as classes or extend)
   ───────────────────────────────────────────────────────────────── */
.dm-display, .dm-h1, .dm-h2, .dm-h3,
.dm-body-l, .dm-body-m, .dm-label, .dm-overline {
  font-family: var(--font-primary);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

.dm-display  { font-size: var(--fs-display);  font-weight: var(--fw-medium);
               letter-spacing: var(--ls-display); line-height: var(--lh-heading); }
.dm-h1       { font-size: var(--fs-h1);       font-weight: var(--fw-medium);
               letter-spacing: var(--ls-h1);      line-height: var(--lh-heading); }
.dm-h2       { font-size: var(--fs-h2);       font-weight: var(--fw-medium);
               letter-spacing: var(--ls-h2);      line-height: var(--lh-subheading); }
.dm-h3       { font-size: var(--fs-h3);       font-weight: var(--fw-medium);
               letter-spacing: var(--ls-h3);      line-height: 1.3; }
.dm-body-l   { font-size: var(--fs-body-l);   font-weight: var(--fw-regular);
               line-height: var(--lh-body); }
.dm-body-m   { font-size: var(--fs-body-m);   font-weight: var(--fw-regular);
               line-height: 1.6; }
.dm-label    { font-size: var(--fs-label);    font-weight: var(--fw-regular);
               letter-spacing: 0.01em; line-height: var(--lh-label); }
.dm-overline { font-size: var(--fs-overline); font-weight: var(--fw-medium);
               letter-spacing: var(--ls-overline); line-height: 1.4;
               text-transform: uppercase; }

/* Gold accent text (use sparingly — max 1 per headline) */
.dm-gold { color: var(--color-gold); }

/* Rule: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}