/* ============================================================
   Lustre color system
   Warm amber primary ("late-afternoon light"), sun-warmed
   neutrals, clear semantic colors. Light + dark themes.
   Dark theme scope: [data-theme="dark"] or .theme-dark
   ============================================================ */

:root {
  /* ---- Brand amber scale ---- */
  --amber-50:  #FCF8EF;
  --amber-100: #F8EED9;
  --amber-200: #F0DDB2;
  --amber-300: #E6C784;
  --amber-400: #DAAE55;
  --amber-500: #C9912F;  /* brand primary */
  --amber-600: #A97524;
  --amber-700: #855B1D;
  --amber-800: #614217;
  --amber-900: #422D11;

  /* ---- Warm neutrals ---- */
  --neutral-0:   #FFFDF9;  /* warm white */
  --neutral-50:  #FAF6EF;  /* app background */
  --neutral-100: #F3EDE2;
  --neutral-200: #E7DFD1;
  --neutral-300: #D3C9B8;
  --neutral-400: #A99E8C;
  --neutral-500: #837968;
  --neutral-600: #5F574A;
  --neutral-700: #453F35;
  --neutral-800: #2E2921;
  --neutral-900: #1F1B15;  /* rich near-black */

  /* ---- Semantic scales ---- */
  --green-100: #E4F0E3;
  --green-500: #4E8A52;   /* success — sage-leaning */
  --green-600: #3D7241;
  --green-700: #2F5A33;

  --red-100: #FBE5E0;
  --red-500: #CE4B37;     /* error — clear coral-red */
  --red-600: #B03A28;
  --red-700: #8E2E1F;

  --orange-100: #F9E7D2;
  --orange-500: #BC6A1E;  /* warning — muted amber-orange, distinct from brand */
  --orange-700: #8C4E14;

  --blue-100: #E2ECF3;
  --blue-500: #48738F;    /* info / translation — calm slate blue */
  --blue-600: #3A607A;
  --blue-700: #2F4F64;

  /* ================= Semantic aliases — LIGHT ================= */
  --bg-app: var(--neutral-50);
  --bg-sunken: var(--neutral-100);
  --surface-card: var(--neutral-0);
  --surface-raised: #FFFFFF;
  --surface-brand-subtle: var(--amber-50);

  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary: var(--neutral-500);
  --text-on-brand: #2A1F0E;
  --text-on-dark: #FFFDF9;
  --text-brand: var(--amber-700);
  --text-link: var(--amber-700);

  --brand-primary: var(--amber-500);
  --brand-primary-pressed: var(--amber-600);
  --brand-primary-subtle: var(--amber-100);

  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-focus: var(--amber-500);

  --success: var(--green-600);
  --success-bg: var(--green-100);
  --error: var(--red-600);
  --error-bg: var(--red-100);
  --warning: var(--orange-500);
  --warning-bg: var(--orange-100);
  --info: var(--blue-600);
  --info-bg: var(--blue-100);

  --overlay-scrim: rgba(31, 27, 21, 0.5);

  /* shadows are warm-tinted, never pure black */
  --shadow-card: 0 1px 2px rgba(66, 45, 17, 0.05), 0 2px 8px rgba(66, 45, 17, 0.06);
  --shadow-raised: 0 2px 4px rgba(66, 45, 17, 0.06), 0 8px 24px rgba(66, 45, 17, 0.10);
  --shadow-overlay: 0 8px 40px rgba(31, 27, 21, 0.22);
}

/* ================= Semantic aliases — DARK ================= */
[data-theme="dark"],
.theme-dark {
  --bg-app: #211C15;          /* deep warm charcoal */
  --bg-sunken: #1A1610;
  --surface-card: #2A241B;    /* surfaces step up in warmth */
  --surface-raised: #332C21;
  --surface-brand-subtle: #38301F;

  --text-primary: #F5EFE4;
  --text-secondary: #C4B9A6;
  --text-tertiary: #9C917D;
  --text-on-brand: #2A1F0E;
  --text-brand: var(--amber-300);
  --text-link: var(--amber-300);

  --brand-primary: var(--amber-400);
  --brand-primary-pressed: var(--amber-300);
  --brand-primary-subtle: #3E3320;

  --border-default: #3E362A;
  --border-strong: #52483A;
  --border-focus: var(--amber-400);

  --success: #7DB981;
  --success-bg: #253A27;
  --error: #E58873;
  --error-bg: #43241D;
  --warning: #DFA05C;
  --warning-bg: #402E17;
  --info: #85AECB;
  --info-bg: #24333F;

  --overlay-scrim: rgba(10, 8, 5, 0.6);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-overlay: 0 8px 40px rgba(0, 0, 0, 0.5);
}