/* ──────────────────────────────────────────────────────────────────
   Davinci B2B — Design Tokens
   Generated 1:1 from uploads/tokens (3).json
   Single source of truth for color, spacing, radius.
   ────────────────────────────────────────────────────────────────── */

:root {
  /* ───────── Spacing (4-pt scale) ───────── */
  --spacing-0: 0px;     --spacing-1: 1px;     --spacing-2: 2px;
  --spacing-4: 4px;     --spacing-8: 8px;     --spacing-12: 12px;
  --spacing-16: 16px;   --spacing-20: 20px;   --spacing-24: 24px;
  --spacing-28: 28px;   --spacing-32: 32px;   --spacing-36: 36px;
  --spacing-40: 40px;   --spacing-44: 44px;   --spacing-48: 48px;
  --spacing-52: 52px;   --spacing-56: 56px;   --spacing-60: 60px;
  --spacing-64: 64px;   --spacing-68: 68px;   --spacing-72: 72px;
  --spacing-76: 76px;   --spacing-80: 80px;   --spacing-84: 84px;
  --spacing-88: 88px;   --spacing-92: 92px;   --spacing-96: 96px;
  --spacing-100: 100px; --spacing-112: 112px; --spacing-120: 120px;
  --spacing-132: 132px; --spacing-148: 148px; --spacing-164: 164px;

  /* ───────── Radius ───────── */
  --radius-0: 0px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-100: 100px;   /* pill */

  /* ───────── Color primitives ───────── */
  /* Bronze Gold */
  --bronze-gold-50:  #faf6f0;
  --bronze-gold-100: #efe3d1;
  --bronze-gold-200: #e7d5bb;
  --bronze-gold-300: #dcc29d;
  --bronze-gold-400: #d5b689;
  --bronze-gold-500: #cba46c;
  --bronze-gold-600: #b99562;
  --bronze-gold-700: #90744d;
  --bronze-gold-800: #705a3b;
  --bronze-gold-900: #55452d;

  /* Ivory */
  --ivory-50:  #fcfbfb;
  --ivory-100: #f5f4f2;
  --ivory-200: #f0eeec;
  --ivory-300: #eae7e3;
  --ivory-400: #e5e2dd;
  --ivory-500: #dfdbd5;
  --ivory-600: #cbc7c2;
  --ivory-700: #9e9b97;
  --ivory-800: #7b7875;
  --ivory-900: #5e5c59;

  /* Dark */
  --dark-50:  #ebebeb;
  --dark-100: #c1c1c1;
  --dark-200: #a3a3a3;
  --dark-300: #7a7a7a;
  --dark-400: #606060;
  --dark-500: #383838;
  --dark-600: #333333;
  --dark-700: #282828;
  --dark-800: #1f1f1f;
  --dark-900: #181818;

  /* Light */
  --light-50:  #ffffff;
  --light-100: #f9f9f9;
  --light-200: #f6f6f6;
  --light-300: #f2f2f2;
  --light-400: #efefef;

  /* Green */
  --green-50:  #ecf8f1;
  --green-100: #c4e8d4;
  --green-200: #a7ddbf;
  --green-300: #7fcda1;
  --green-400: #66c48f;
  --green-500: #40b573;
  --green-600: #3aa569;
  --green-700: #2d8152;
  --green-800: #23643f;
  --green-900: #1b4c30;

  /* Red */
  --red-50:  #faeded;
  --red-100: #f0c6c6;
  --red-200: #e8aaaa;
  --red-300: #de8383;
  --red-400: #d86b6b;
  --red-500: #ce4646;
  --red-600: #bb4040;
  --red-700: #923232;
  --red-800: #712727;
  --red-900: #571d1d;

  /* Blue */
  --blue-50:  #edf4fc;
  --blue-100: #c7dbf6;
  --blue-200: #accaf2;
  --blue-300: #86b2ec;
  --blue-400: #6fa3e8;
  --blue-500: #4b8ce2;
  --blue-600: #447fce;
  --blue-700: #3563a0;
  --blue-800: #294d7c;
  --blue-900: #203b5f;

  /* Yellow */
  --yellow-50:  #fcf7ea;
  --yellow-100: #f5e7be;
  --yellow-200: #f1dc9f;
  --yellow-300: #eacc73;
  --yellow-400: #e6c258;
  --yellow-500: #e0b32e;
  --yellow-600: #cca32a;
  --yellow-700: #9f7f21;
  --yellow-800: #7b6219;
  --yellow-900: #5e4b13;

  /* ───────── Semantic tokens (tokens.light) ───────── */
  --color-primary:   #181818;
  --color-success:   #40b573;
  --color-error:     #ce4646;
  --color-warning:   #e0b32e;
  --color-info:      #4b8ce2;

  /* Text */
  --text-content-default: #7a7a7a;
  --text-content-strong:  #383838;
  --text-content-subtle:  #a3a3a3;
  --text-header-default:  #181818;
  --text-header-subtle:   #333333;
  --text-title-strong:    #282828;
  --text-title-default:   #606060;
  --text-title-subtle:    #a3a3a3;
  --text-white:           #ffffff;
  --text-black:           #181818;

  /* Stroke */
  --stroke-default: #c1c1c1;
  --stroke-subtle:  #ebebeb;

  /* Background */
  --bg-surface-white:        #ffffff;
  --bg-surface-black:        #181818;
  --bg-surface-ivory:        #f5f4f2;
  --bg-surface-subtle-ivory: #fcfbfb;
  --bg-card-default:         #f6f6f6;
  --bg-card-subtle:          #f9f9f9;
  --bg-card-default-ivory:   #f5f4f2;
  --bg-card-subtle-ivory:    #fcfbfb;

  /* Icon */
  --icon-strong:  #1f1f1f;
  --icon-default: #7a7a7a;
  --icon-subtle:  #c1c1c1;
  --icon-white:   #ffffff;

  /* Tag */
  --tag-text-strong:    #1f1f1f;
  --tag-text-default:   #333333;
  --tag-text-subtle:    #606060;
  --tag-bg-default:     #efefef;
  --tag-bg-subtle:      #ffffff;
  --tag-bg-ivory:       #f5f4f2;
  --tag-bg-ivory-subtle:#fcfbfb;

  /* Buttons */
  --btn-primary-bg:           #181818;
  --btn-primary-bg-hover:     #333333;
  --btn-primary-text:         #ffffff;
  --btn-primary-stroke:       #181818;
  --btn-primary-stroke-hover: #333333;

  --btn-secondary-bg:           #ffffff;
  --btn-secondary-bg-hover:     #f6f6f6;
  --btn-secondary-text:         #181818;
  --btn-secondary-stroke:       #ebebeb;
  --btn-secondary-stroke-hover: #ebebeb;

  /* Layout */
  --container-max: 1440px;
  --container-pad: 80px;
}

/* ───────── Fonts ───────── */
@font-face {
  font-family: 'TRJN DaVinci';
  src: url('../img/fonts/TRJN-DaVinci-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TRJN DaVinci';
  src: url('../img/fonts/TRJN-DaVinci-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TRJN DaVinci';
  src: url('../img/fonts/TRJN-DaVinci-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;
  --font-serif:  'TRJN DaVinci', 'Gilda Display', 'Times New Roman', serif;
  --font-serif-alt: 'Gilda Display', 'TRJN DaVinci', serif;
  --font-italic-display: 'DM Serif Text', 'TRJN DaVinci', serif;
}