/* =====================================================
   ELVA — COLOR TOKENS
   Primitive palette + semantic aliases.
   Lifted verbatim from elva-platform (globals.css @theme
   + styles/base.css). Warm, earthy, calm palette built
   around terracotta (Burnt Sienna) and deep teal-grey
   (Limed Spruce), softened by sage, sand and slate.
   ===================================================== */

:root {
  /* ---- Neutrals ---- */
  --color-neutral-white: #ffffff;
  --color-neutral-surface: #fafafa;
  --color-neutral-lightest: #f2f2f2;
  --color-neutral-border: #ebebeb;
  --color-neutral-lighter: #d9d9d9;
  --color-neutral-light: #b3b3b3;
  --color-neutral-neutral: #818181;
  --color-neutral-dark: #4e4e4f;
  --color-neutral-darker: #1c1c1d;
  --color-neutral-darkest: #030304;

  /* ---- Burnt Sienna — the brand accent (terracotta) ---- */
  --color-burnt-sienna-lightest: #fcf2ec;
  --color-burnt-sienna-lighter: #fae5da;
  --color-burnt-sienna-light: #f0a67e;
  --color-burnt-sienna-base: #ea8147;
  --color-burnt-sienna-dark: #bb6738;
  --color-burnt-sienna-darker: #5d331c;
  --color-burnt-sienna-darkest: #462615;

  /* ---- Limed Spruce — text & ink (deep teal-grey) ---- */
  --color-limed-spruce-lightest: #eaebec;
  --color-limed-spruce-lighter: #d6d8da;
  --color-limed-spruce-light: #70797f;
  --color-limed-spruce-base: #334049;
  --color-limed-spruce-dark: #28333a;
  --color-limed-spruce-darker: #14191d;
  --color-limed-spruce-darkest: #0f1315;

  /* ---- Surf Crest — secondary (sage green) ---- */
  --color-surf-crest-lightest: #fafcfa;
  --color-surf-crest-lighter: #f6f9f6;
  --color-surf-crest-light: #dfecdf;
  --color-surf-crest-base: #d2e5d2;
  --color-surf-crest-dark: #a8b7a8;
  --color-surf-crest-darker: #545b54;
  --color-surf-crest-darkest: #3f443f;

  /* ---- Casper — informational accent (slate blue-grey) ---- */
  --color-casper-lightest: #f6f8f9;
  --color-casper-lighter: #edf1f4;
  --color-casper-light: #c1ced8;
  --color-casper-base: #a7bac8;
  --color-casper-dark: #8594a0;
  --color-casper-darker: #424a50;
  --color-casper-darkest: #32373c;

  /* ---- Tana — muted surfaces (warm sand) ---- */
  --color-tana-lightest: #fbfaf8;
  --color-tana-lighter: #f8f6f1;
  --color-tana-light: #e6e0d0;
  --color-tana-base: #dcd3bd;
  --color-tana-dark: #b0a897;
  --color-tana-darker: #58544b;
  --color-tana-darkest: #423f38;

  /* ---- Status / urgency ---- */
  --color-status-overdue: #ff383c;
  --color-status-soon: #ff8d28;
  --color-status-default: #8e8e93;

  /* =====================================================
     SEMANTIC ALIASES — Light mode (the default theme)
     Reference these in product UI, never the raw primitives.
     ===================================================== */
  --background: var(--color-neutral-white);
  --foreground: var(--color-limed-spruce-darker);

  --card: var(--color-neutral-white);
  --card-foreground: var(--color-limed-spruce-darker);

  --popover: var(--color-neutral-white);
  --popover-foreground: var(--color-limed-spruce-darker);

  /* Primary action = near-black ink (not the orange). */
  --primary: var(--color-black, #030304);
  --primary-foreground: var(--color-neutral-white);

  --secondary: var(--color-surf-crest-lighter);
  --secondary-foreground: var(--color-limed-spruce-base);

  --muted: var(--color-tana-lighter);
  --muted-foreground: var(--color-limed-spruce-light);

  --accent: var(--color-casper-lighter);
  --accent-foreground: var(--color-casper-darker);

  --destructive: #e05252;
  --destructive-foreground: var(--color-neutral-white);

  --border: rgba(20, 25, 29, 0.15);
  --input: var(--color-neutral-lightest);
  --ring: var(--color-burnt-sienna-base);

  /* Charts */
  --chart-1: var(--color-surf-crest-dark);
  --chart-2: var(--color-burnt-sienna-base);
  --chart-3: var(--color-casper-base);
  --chart-4: var(--color-tana-base);
  --chart-5: var(--color-neutral-neutral);

  /* Sidebar — warm cream, distinct from the white canvas */
  --sidebar: #f7f3ef;
  --sidebar-foreground: #3a3532;
  --sidebar-primary: var(--color-black, #030304);
  --sidebar-primary-foreground: var(--color-neutral-white);
  --sidebar-accent: var(--color-burnt-sienna-lightest);
  --sidebar-accent-foreground: var(--color-burnt-sienna-dark);
  --sidebar-border: #e7ddd6;
  --sidebar-ring: var(--color-burnt-sienna-base);

  /* convenience black alias used above */
  --color-black: #030304;
}

/* =====================================================
   SEMANTIC ALIASES — Dark mode
   Apply by adding class="dark" to a container or <html>.
   ===================================================== */
.dark {
  --background: var(--color-limed-spruce-darkest);
  --foreground: var(--color-neutral-lightest);

  --card: var(--color-limed-spruce-darker);
  --card-foreground: var(--color-neutral-lightest);

  --popover: var(--color-limed-spruce-darker);
  --popover-foreground: var(--color-neutral-lightest);

  --primary: var(--color-burnt-sienna-light);
  --primary-foreground: var(--color-neutral-white);

  --secondary: var(--color-limed-spruce-dark);
  --secondary-foreground: var(--color-neutral-lightest);

  --muted: var(--color-limed-spruce-dark);
  --muted-foreground: var(--color-neutral-light);

  --accent: var(--color-casper-darkest);
  --accent-foreground: var(--color-casper-light);

  --destructive: #f87171;
  --destructive-foreground: var(--color-neutral-white);

  --border: rgba(255, 255, 255, 0.12);
  --input: var(--color-limed-spruce-dark);
  --ring: var(--color-burnt-sienna-light);

  --chart-1: var(--color-surf-crest-base);
  --chart-2: var(--color-burnt-sienna-light);
  --chart-3: var(--color-casper-light);
  --chart-4: var(--color-tana-base);
  --chart-5: var(--color-neutral-neutral);

  --sidebar: var(--color-limed-spruce-darkest);
  --sidebar-foreground: var(--color-neutral-lightest);
  --sidebar-primary: var(--color-burnt-sienna-light);
  --sidebar-primary-foreground: var(--color-neutral-white);
  --sidebar-accent: var(--color-burnt-sienna-darker);
  --sidebar-accent-foreground: var(--color-burnt-sienna-lighter);
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-ring: var(--color-burnt-sienna-light);
}