/* =====================================================================
   CacaoFlow — Design Tokens (single source of truth)

   Option C: this file only CENTRALISES the palette. Every value below is
   copied verbatim from cacaoflow-light.css / cacaoflow-dark.css, and it
   is loaded BEFORE them, so where both define the same token the value
   is identical and the cascade resolves to exactly what it did before.
   Nothing here changes the appearance of any page.

   Load order (per page):
     tokens.css  ->  cacaoflow-light.css  ->  cacaoflow-dark.css

   The selectors mirror the theme files exactly:
     light tokens  on  html:not([data-theme="dark"])
     dark  tokens  on  html[data-theme="dark"]
   so neither theme can leak into the other.
   ===================================================================== */

/* ---------------------------------------------------------------------
   LIGHT  (matches cacaoflow-light.css)
   --------------------------------------------------------------------- */
html:not([data-theme="dark"]) {
  /* canvas */
  --cfl-canvas: #F7F3EA;
  --cfl-topbar: #FDFBF6;

  /* surfaces */
  --cfl-surface: #FFFDF8;   /* cards, panels */
  --cfl-surface-2: #FBF7EF; /* inner boxes, table head, read-only values */
  --cfl-surface-3: #F4EEE2; /* hover, secondary buttons */
  --cfl-input: #FFFDF8;

  /* lines */
  --cfl-border: #EDE4D6;
  --cfl-border-soft: #F2EBE0;
  --cfl-border-strong: #E0D4C0;

  /* soft edge: hairline ring + low shadow */
  --cfl-shadow: 0 0 0 1px rgba(61, 28, 2, 0.045), 0 1px 3px rgba(61, 28, 2, 0.05);
  --cfl-shadow-lg: 0 0 0 1px rgba(61, 28, 2, 0.05), 0 12px 32px -12px rgba(61, 28, 2, 0.18);
}

/* ---------------------------------------------------------------------
   DARK  (matches cacaoflow-dark.css)
   --------------------------------------------------------------------- */
html[data-theme="dark"] {
  color-scheme: dark;

  /* canvas */
  --cf-bg: #0F0F10;
  --cf-sidebar: #0A0A0B;
  --cf-topbar: #151517;

  /* surfaces */
  --cf-surface: #1A1A1C;   /* cards, panels */
  --cf-surface-2: #202023; /* inner boxes, table head, inputs-on-card */
  --cf-surface-3: #26262A; /* hover, secondary buttons */
  --cf-input: #141416;

  /* lines */
  --cf-border: #27272B;
  --cf-border-soft: rgba(255, 255, 255, 0.07);
  --cf-border-strong: rgba(255, 255, 255, 0.14);

  /* type */
  --cf-text: #F2F0EC;
  --cf-text-2: #C7C3BD;
  --cf-muted: #9A968F;
  --cf-faint: #6E6A65;

  /* accent */
  --cf-gold: #D9962C;
  --cf-gold-soft: #E8B45F;
  --cf-gold-deep: #B87C22;
  --cf-gold-tint: rgba(217, 150, 44, 0.13);
  --cf-gold-line: rgba(217, 150, 44, 0.32);

  /* status */
  --cf-green: #55B684;
  --cf-green-tint: rgba(45, 106, 79, 0.20);
  --cf-green-line: rgba(85, 182, 132, 0.30);

  --cf-red: #E1736A;
  --cf-red-tint: rgba(178, 55, 46, 0.18);
  --cf-red-line: rgba(225, 115, 106, 0.30);

  --cf-blue: #6BA9E8;
  --cf-blue-tint: rgba(59, 130, 246, 0.14);
  --cf-blue-line: rgba(107, 169, 232, 0.30);

  --cf-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --cf-shadow-lg: 0 18px 44px -14px rgba(0, 0, 0, 0.7);
}