/* ============================================================
   COLORS — Yan Trotta Design System
   Palette extracted from the previous portfolio PDF:
   navy #152734 / #1b3344 · graphite #3c3c3b / #1e1e1c
   accent amber #e98637 · paper white.
   Light mode only.
   ============================================================ */
:root {
  /* ---- Brand navy (the "azul" of the portfolio) ---- */
  --navy-950: #0a151d;
  --navy-900: #0e1c26;
  --navy-800: #152734; /* portfolio source */
  --navy-700: #1b3344; /* portfolio source */
  --navy-600: #244557;
  --navy-500: #305a6f;
  --navy-300: #6f8a99;
  --navy-100: #d7e0e6;
  --navy-050: #eef2f5;

  /* ---- Graphite neutrals (CV header / body) ---- */
  --graphite-950: #161614;
  --graphite-900: #1e1e1c; /* portfolio source */
  --graphite-800: #2b2b29;
  --graphite-700: #3c3c3b; /* portfolio / CV source */
  --graphite-600: #545452;
  --graphite-500: #6f6f6c;
  --graphite-400: #97968f;
  --graphite-300: #c2c1ba;
  --graphite-200: #e3e2dc;
  --graphite-100: #efeee9;
  --graphite-050: #f6f5f1;

  /* ---- Warm amber accent (fire / terracotta cushions) ---- */
  --amber-700: #b85f22;
  --amber-600: #d9742e;
  --amber-500: #e98637; /* portfolio source */
  --amber-400: #f0a05e;
  --amber-100: #f9e3d2;

  /* ---- Pure ---- */
  --paper: #faf9f6;  /* warm off-white page */
  --white: #ffffff;
  --black: #000000;

  /* ---- Functional ---- */
  --green-600: #3f7d5c;
  --red-600: #b3503f;

  /* ============================================================
     SEMANTIC ALIASES — use these in components
     ============================================================ */
  --color-bg: var(--paper);
  --color-surface: var(--white);
  --color-surface-2: var(--graphite-050);
  --color-surface-inverse: var(--navy-800);

  --color-text: var(--graphite-900);
  --color-text-muted: var(--graphite-500);
  --color-text-subtle: var(--graphite-400);
  --color-text-on-dark: var(--graphite-050);
  --color-text-on-dark-muted: var(--navy-300);

  --color-heading: var(--navy-800);

  --color-primary: var(--navy-800);
  --color-primary-hover: var(--navy-900);
  --color-primary-active: var(--navy-950);
  --color-on-primary: var(--white);

  --color-accent: var(--amber-500);
  --color-accent-hover: var(--amber-600);
  --color-on-accent: var(--white);

  --color-border: var(--graphite-200);
  --color-border-strong: var(--graphite-300);
  --color-border-inverse: rgba(255, 255, 255, 0.16);

  --color-focus-ring: var(--amber-500);

  --color-success: var(--green-600);
  --color-danger: var(--red-600);
}