/* ============================================================
   Siqlo — Color tokens
   Rebrand: preto & dourado (black & gold), dark theme.
   Gold sampled directly from the brand mark.
   ============================================================ */
:root {
  /* ---- Ink / neutral ramp (cool charcoal, from logo bg #191A1E) ---- */
  --ink-950: #0B0C0F;   /* deepest page well */
  --ink-900: #101116;   /* page background */
  --ink-850: #15171D;   /* subtle background band */
  --ink-800: #1A1D24;   /* card surface */
  --ink-750: #222630;   /* raised surface / input */
  --ink-700: #2C313C;   /* strong border, hover fill */
  --ink-600: #3A404D;   /* default border */
  --ink-500: #565D6B;   /* disabled / faint line */
  --ink-400: #7B8391;   /* muted text */
  --ink-300: #A7AEBB;   /* secondary text */
  --ink-200: #CBD0D9;   /* high-contrast secondary */
  --ink-100: #E7EAEF;   /* near-white */
  --ink-050: #F4F6F9;   /* white-ish */
  --white:   #FFFFFF;

  /* ---- Gold ramp (brand mark) ---- */
  --gold-100: #F5E6BC;
  --gold-200: #EAD394;
  --gold-300: #DCBD6C;   /* light highlight of the mark */
  --gold-400: #CFAA57;
  --gold-500: #C39A4A;   /* PRIMARY gold */
  --gold-600: #AC8438;   /* pressed / darker */
  --gold-700: #8B692A;
  --gold-800: #644C1E;
  --grad-gold: linear-gradient(135deg, #E4C877 0%, #C39A4A 55%, #A87F32 100%);   /* @kind color */
  --grad-gold-soft: linear-gradient(135deg, #DCBD6C 0%, #C39A4A 100%);   /* @kind color */

  /* ---- Semantic hues (tuned for dark surfaces) ---- */
  --green-500: #34C27E;  --green-400: #4FD897;  --green-700: #1C6E48;
  --red-500:   #E5565B;  --red-400:   #F27B7F;  --red-700:   #7E2A2D;
  --amber-500: #E7A53C;  --amber-400: #F4C062;  --amber-700: #8A5F1B;
  --blue-500:  #4D8DF0;  --blue-400:  #78A9F4;  --blue-700:  #274F8C;

  /* ============================================================
     Semantic aliases — reference THESE in components
     ============================================================ */
  /* Backgrounds & surfaces */
  --bg-base: var(--ink-900);
  --bg-well: var(--ink-950);
  --bg-subtle: var(--ink-850);
  --surface-card: var(--ink-800);
  --surface-raised: var(--ink-750);
  --surface-input: var(--ink-750);
  --surface-hover: var(--ink-700);

  /* Borders */
  --border-subtle: var(--ink-700);
  --border-default: var(--ink-600);
  --border-strong: var(--ink-500);
  --border-gold: rgba(195, 154, 74, 0.55);

  /* Text */
  --text-primary: var(--ink-050);
  --text-secondary: var(--ink-300);
  --text-muted: var(--ink-400);
  --text-disabled: var(--ink-500);
  --text-gold: var(--gold-300);
  --text-on-gold: #17130A;      /* dark ink for use ON gold fills */
  --text-inverse: #14161B;

  /* Brand / interactive */
  --brand: var(--gold-500);
  --brand-hover: var(--gold-400);
  --brand-active: var(--gold-600);
  --brand-fill: var(--grad-gold);
  --focus-ring: rgba(195, 154, 74, 0.34);

  /* Status */
  --success: var(--green-500);
  --success-soft: rgba(52, 194, 126, 0.14);
  --danger: var(--red-500);
  --danger-soft: rgba(229, 86, 91, 0.14);
  --warning: var(--amber-500);
  --warning-soft: rgba(231, 165, 60, 0.14);
  --info: var(--blue-500);
  --info-soft: rgba(77, 141, 240, 0.14);
}