/* ============================================================================
   Jenia / Dedalo — Colors & Type Foundations
   ----------------------------------------------------------------------------
   Source of truth: Dedalo internal dashboard (Streamlit) + Jenia brand logo.
   Aesthetic: Apple-inspired light UI (San Francisco-like via Inter), neutral
   greys, a single violet interactive accent, and the Jenia brand gradient
   reserved for hero / brand moments only.
   Load:  <link rel="stylesheet" href="colors_and_type.css">
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Brand -------------------------------------------------------------- */
  --jenia-violet:   #b833ff;  /* gradient start  */
  --jenia-purple:   #9838f6;  /* gradient        */
  --jenia-magenta:  #cf4e75;  /* gradient mid     */
  --jenia-orange:   #e35407;  /* gradient         */
  --jenia-maroon:   #7a2a1e;  /* gradient end     */
  --jenia-gradient: linear-gradient(95deg,
                      #b833ff 0%, #9838f6 22%, #cf4e75 52%, #e35407 80%, #7a2a1e 100%); /* @kind color */

  /* ---- Primary (interactive accent) -------------------------------------- */
  /* Pulled from the Streamlit theme primaryColor = #8B5CF6 */
  --primary:        #8b5cf6;
  --primary-hover:  #7c4df0;
  --primary-press:  #6d3fe0;
  --primary-tint:   #f3eefe;  /* selected rows / soft fills */
  --primary-ring:   rgba(139, 92, 246, 0.30);

  /* ---- Neutrals / text ---------------------------------------------------- */
  --fg1:  #1d1d1f;  /* primary text, values, headings */
  --fg2:  #424245;  /* body text */
  --fg3:  #86868b;  /* secondary / captions / labels */
  --fg4:  #aeaeb2;  /* disabled / placeholder */

  /* ---- Surfaces ----------------------------------------------------------- */
  --bg-app:    #fafafa;  /* page background  */
  --bg-card:   #ffffff;  /* cards, sidebar, inputs */
  --bg-subtle: #f5f5f7;  /* hover fills, chips, secondary surfaces */
  --bg-rail:   #f0f0f0;  /* row dividers (light) */

  /* ---- Borders ------------------------------------------------------------ */
  --border:        #e8e8ed;  /* default hairline */
  --border-strong: #d2d2d7;  /* hover / emphasis */
  --border-faint:  #f0f0f0;  /* internal list dividers */

  /* ---- Semantic ----------------------------------------------------------- */
  --success:      #34c759;  /* "trovato" / found  */
  --success-tint: #e8f8ed;
  --danger:       #ff3b30;  /* "non trovato" / missing / error */
  --danger-tint:  #ffecea;
  --warning:      #ff9500;  /* warnings (oversized PDF, partials) */
  --warning-tint: #fff4e5;
  --info:         #446aa4;  /* the PDF stockist section-divider blue */

  /* ---- Radii -------------------------------------------------------------- */
  --r-sm:  8px;
  --r-md:  10px;   /* buttons, inputs */
  --r-lg:  12px;   /* expanders, list cards */
  --r-xl:  16px;   /* metric / KPI cards */
  --r-full: 999px;

  /* ---- Elevation ---------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.10);

  /* ---- Spacing scale (4pt base) ------------------------------------------ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ---- Type families ------------------------------------------------------ */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Motion ------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
  --dur:  0.15s; /* @kind other */
}

/* ============================================================================
   Base type styles
   ========================================================================== */
body {
  font-family: var(--font-sans);
  color: var(--fg1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Page title — the big "Dashboard" heading */
.t-page {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg1);
  line-height: 1.1;
}

/* Eyebrow / app label — uppercase tracked grey ("DEDALO") */
.t-eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg3);
}

/* Section heading */
.t-h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg1);
}

.t-h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg1);
}

/* Body */
.t-body  { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--fg2); }
.t-small { font-size: 13px; font-weight: 400; color: var(--fg3); }

/* Field label — small uppercase tracked grey */
.t-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg3);
}

/* Big KPI metric value */
.t-metric {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}

/* Mono / tabular numbers (counts, sizes, codes) */
.t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Brand wordmark gradient text helper */
.t-gradient {
  background: var(--jenia-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}