/* =========================================================================
   DECANT — Wine Cellar App
   Foundations: Roboto (from TAP design system) + TAP color tokens, extended
   with a wine-appropriate brand layer and three theme skins.
   The TAP four-stop gradient is reused as the signature chart + accent motif.
   ========================================================================= */

@font-face { font-family:"Roboto"; font-weight:300; src:url("../fonts/Roboto-Light.ttf")   format("truetype"); font-display:swap; }
@font-face { font-family:"Roboto"; font-weight:400; src:url("../fonts/Roboto-Regular.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Roboto"; font-weight:500; src:url("../fonts/Roboto-Medium.ttf")  format("truetype"); font-display:swap; }
@font-face { font-family:"Roboto"; font-weight:700; src:url("../fonts/Roboto-Bold.ttf")    format("truetype"); font-display:swap; }
@font-face { font-family:"Roboto"; font-weight:900; src:url("../fonts/Roboto-Black.ttf")   format("truetype"); font-display:swap; }

:root {
  /* --- TAP brand gradient stops (retained, used as chart + accent motif) --- */
  --tap-orange:#F15A29; --tap-pink:#DF108F; --tap-purple:#9D4B9C; --tap-blue:#5E71B6;
  --tap-gradient: linear-gradient(135deg, var(--tap-orange) 0%, var(--tap-pink) 33%, var(--tap-purple) 66%, var(--tap-blue) 100%);
  --tap-gradient-bar: linear-gradient(90deg, var(--tap-blue) 0%, var(--tap-purple) 35%, var(--tap-pink) 70%, var(--tap-orange) 100%);

  /* --- TAP neutrals --- */
  --ink-900:#0B0B0C; --ink-800:#1A1B1F; --ink-700:#2D2F36; --ink-500:#5C5F68;
  --ink-400:#8A8D95; --ink-300:#C7C9CF; --ink-200:#E4E5E9; --ink-100:#F2F3F5; --ink-50:#F8F9FA; --white:#FFFFFF;

  --font-sans:"Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-serif: "Roboto Slab", Georgia, "Times New Roman", serif;

  /* --- Wine palette (categorical, used for varietal/type segmentation) --- */
  --wine-cab:    #7B2233;  /* Cabernet / Bordeaux red */
  --wine-pinot:  #A8415B;  /* Pinot Noir */
  --wine-syrah:  #5A1E2D;  /* Syrah / deep red */
  --wine-chard:  #C9A227;  /* Chardonnay / gold */
  --wine-sauv:   #9DB36B;  /* Sauvignon / green-gold */
  --wine-ries:   #E0C04A;  /* Riesling */
  --wine-spark:  #D8C9A3;  /* Sparkling */
  --wine-rose:   #E08F9C;  /* Rosé */
  --wine-tawny:  #9A5524;  /* Dessert / port / tawny */

  /* drink-window status */
  --dw-ready:#3F8F5B;  /* in window / drink now */
  --dw-soon:#C99A2E;   /* approaching */
  --dw-hold:#5E71B6;   /* hold / too young */
  --dw-past:#B05335;   /* past peak */

  --radius-2:6px; --radius-3:12px; --radius-4:18px; --radius-pill:999px;
  --ease-out: cubic-bezier(0.22,1,0.36,1);
  --dur-1:140ms; --dur-2:220ms;
}

/* =========================================================================
   THEME SKINS — scoped so multiple themed instances coexist on one canvas
   ========================================================================= */

/* LIGHT · Crisp (default) */
.dcnt, .dcnt[data-theme="light"] {
  --page:#F4F2EF;
  --surface:#FFFFFF;
  --surface-2:#FAF8F5;
  --txt-1:#16140F;
  --txt-2:#55504A;
  --txt-3:#8C857C;
  --line:#EAE6E0;
  --line-strong:#DAD4CC;
  --accent:#8E2A3C;          /* claret */
  --accent-press:#73212F;
  --accent-soft:#F6E9EB;
  --on-accent:#FFFFFF;
  --chip:#F1EDE7;
  --shadow-1: 0 1px 2px rgba(40,30,25,0.05);
  --shadow-2: 0 6px 22px rgba(40,30,25,0.09);
  --bar-track:#EFEAE3;
  --island:#000;
}

/* DARK · Cellar */
.dcnt[data-theme="dark"] {
  --page:#121013;
  --surface:#1C191D;
  --surface-2:#231F25;
  --txt-1:#F4EEE9;
  --txt-2:#B8AFA8;
  --txt-3:#867D77;
  --line:#2C272E;
  --line-strong:#39333B;
  --accent:#E0A33C;          /* warm amber, glows on dark */
  --accent-press:#C98A28;
  --accent-soft:#2A2218;
  --on-accent:#1A140A;
  --chip:#26222A;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 10px 30px rgba(0,0,0,0.5);
  --bar-track:#2A252E;
  --island:#000;
}

/* WARM · Paper */
.dcnt[data-theme="warm"] {
  --page:#EFE7DA;
  --surface:#FBF7F0;
  --surface-2:#F4ECDF;
  --txt-1:#2A211A;
  --txt-2:#5F5346;
  --txt-3:#8E8071;
  --line:#E4D8C6;
  --line-strong:#D6C7B1;
  --accent:#6E2436;          /* deep bordeaux */
  --accent-press:#571B2A;
  --accent-soft:#F0E2DC;
  --on-accent:#FBF7F0;
  --chip:#EFE4D3;
  --shadow-1: 0 1px 2px rgba(90,60,30,0.06);
  --shadow-2: 0 8px 24px rgba(90,60,30,0.12);
  --bar-track:#E6DAC7;
  --island:#000;
}

/* =========================================================================
   APP SURFACE PRIMITIVES
   ========================================================================= */
.dcnt {
  font-family: var(--font-sans);
  color: var(--txt-1);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  height: 100%;
  box-sizing: border-box;
}
.dcnt *, .dcnt *::before, .dcnt *::after { box-sizing: border-box; }

.dcnt .eyebrow {
  font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--txt-3); margin:0;
}
.dcnt .gbar { height:3px; width:34px; border-radius:999px; background: var(--tap-gradient-bar); }

.dcnt .card {
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-1);
}

.dcnt .chip {
  display:inline-flex; align-items:center; gap:5px;
  background: var(--chip); color: var(--txt-2);
  font-size:11.5px; font-weight:500; line-height:1;
  padding:5px 9px; border-radius:999px; white-space:nowrap;
}

.dcnt .btn {
  appearance:none; border:none; cursor:pointer; font-family:inherit;
  font-size:14px; font-weight:600; border-radius:999px;
  padding:11px 18px; display:inline-flex; align-items:center; gap:7px;
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.dcnt .btn-primary { background: var(--accent); color: var(--on-accent); }
.dcnt .btn-primary:active { background: var(--accent-press); transform: translateY(1px); }
.dcnt .btn-ghost { background: transparent; color: var(--txt-1); border:1px solid var(--line-strong); }

/* numerals: tabular for stats */
.dcnt .num { font-variant-numeric: tabular-nums; font-feature-settings:"tnum"; }

/* Capture-safe chart entrance: animates from a still-visible base (never
   opacity:0), so screenshots, print and reduced-motion always show content. */
@keyframes dcChartIn { from { opacity:0.4; transform: translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference) {
  .dcnt .chart-in { animation: dcChartIn 0.5s var(--ease-out) both; }
}