/*
 * tokens.css — Snowflake-themed design tokens
 *
 * Źródło: dashboard-design-system/tokens.md.
 * Wszystkie kolory, typografia, spacing, grid w jednym miejscu.
 */

/* ─── Colors ─────────────────────────────────────────────────────────── */

:root {
  /* Surface */
  --surface-canvas:  #FFFFFF;
  --surface-card:    #FFFFFF;
  --surface-raised:  #FFFFFF;
  --surface-sunken:  #F8FAFC;
  --surface-overlay: rgba(15, 23, 42, 0.6);

  /* Text */
  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-muted:     #94A3B8;
  --text-inverse:   #FFFFFF;
  --text-link:      #29B5E8;

  /* Borders */
  --border-subtle:  #F1F5F9;
  --border-default: #E2E8F0;
  --border-strong:  #CBD5E1;

  /* Brand (Snowflake) — UI accent only */
  --brand-primary:         #29B5E8;
  --brand-primary-hover:   #11A2D9;
  --brand-primary-pressed: #0A85B5;
  --brand-primary-subtle:  #E1F4FB;
  --brand-deep:            #1B2A47;
  --brand-ink:             #000A20;

  /* Semantic */
  --semantic-success:        #10B981;
  --semantic-success-subtle: #D1FAE5;
  --semantic-warning:        #F59E0B;
  --semantic-warning-subtle: #FEF3C7;
  --semantic-danger:         #EF4444;
  --semantic-danger-subtle:  #FEE2E2;
  --semantic-info:           #3B82F6;
  --semantic-info-subtle:    #DBEAFE;

  /* Data — categorical (8 hue, no red, no Snowflake Blue) */
  --data-1: #4F46E5;
  --data-2: #0891B2;
  --data-3: #059669;
  --data-4: #CA8A04;
  --data-5: #7C3AED;
  --data-6: #DB2777;
  --data-7: #14B8A6;
  --data-8: #475569;

  /* Data — sequential (Snowflake Blue ramp) */
  --data-seq-1: #E1F4FB;
  --data-seq-2: #A8DDF1;
  --data-seq-3: #5CCEEC;
  --data-seq-4: #29B5E8;
  --data-seq-5: #0A85B5;
  --data-seq-6: #0A6791;
  --data-seq-7: #11567F;
  --data-seq-8: #1B2A47;

  /* Data — diverging (cool ↔ warm) */
  --data-div-cool-3: #1E40AF;
  --data-div-cool-2: #3B82F6;
  --data-div-cool-1: #93C5FD;
  --data-div-neutral: #F1F5F9;
  --data-div-warm-1:  #FED7AA;
  --data-div-warm-2:  #F97316;
  --data-div-warm-3:  #C2410C;
}

[data-theme="dark"] {
  --surface-canvas:  #000A20;
  --surface-card:    #0F1A33;
  --surface-raised:  #1B2A47;
  --surface-sunken:  #0A1428;
  --surface-overlay: rgba(0, 0, 0, 0.7);

  --text-primary:   #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted:     #94A3B8;
  --text-inverse:   #0F172A;
  --text-link:      #5CCEEC;

  --border-subtle:  #1E293B;
  --border-default: #334155;
  --border-strong:  #475569;
}

/* ─── Typography ─────────────────────────────────────────────────────── */

:root {
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --font-feature-settings: "tnum", "ss01", "cv11";

  --font-size-display:    28px;
  --font-size-h1:         24px;
  --font-size-h2:         20px;
  --font-size-h3:         16px;
  --font-size-kpi-value:  32px;
  --font-size-kpi-label:  13px;
  --font-size-chart-title: 15px;
  --font-size-body:       14px;
  --font-size-axis:       11px;
  --font-size-footnote:   10px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.15;
  --line-height-normal:  1.45;
  --line-height-relaxed: 1.6;
}

/* ─── Spacing ────────────────────────────────────────────────────────── */

:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --card-gap:     var(--space-4);
  --card-padding: var(--space-5);
  --section-gap:  var(--space-8);

  --touch-target: 44px;
}

/* ─── Grid ───────────────────────────────────────────────────────────── */

:root {
  --grid-cols: 12;
  --grid-gap:  var(--space-4);
  --content-max-width: 1440px;
}

/* ─── Radius ─────────────────────────────────────────────────────────── */

:root {
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;
}

/* ─── Elevation ──────────────────────────────────────────────────────── */

:root {
  --shadow-card:    0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 1px 1px 0 rgba(15, 23, 42, 0.06);
  --shadow-popover: 0 4px 12px 0 rgba(15, 23, 42, 0.08);
  --shadow-modal:   0 16px 32px 0 rgba(15, 23, 42, 0.12);
  --shadow-focus:   0 0 0 3px rgba(41, 181, 232, 0.3);
}

/* ─── Motion ─────────────────────────────────────────────────────────── */

:root {
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Z-index ────────────────────────────────────────────────────────── */

:root {
  --z-base:     0;
  --z-card:     1;
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-popover:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ─── Breakpoints ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  :root {
    --grid-cols: 4;
    --grid-gap: var(--space-3);
  }
}

/* ─── Base & utilities ───────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-sans);
  font-feature-settings: var(--font-feature-settings);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
}

.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-6  { grid-column: span 6; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

@media (max-width: 768px) {
  .col-3, .col-4, .col-6, .col-8 { grid-column: span 4; }
  .col-12 { grid-column: span 4; }
}

/* ─── KPI delta — direction × sentiment (orthogonal) ─────────────────── */
/*
 * Direction = which way the value moved (▲▼—).
 * Sentiment = good/bad for the business (green/red/muted).
 * Combine ONE class from each axis. See tokens.md for full table.
 *
 * Example: churn dropped from 2.4% to 2.1% →
 *   `<div class="kpi-card__delta delta--down delta--good">0.3 pp</div>`
 */

.delta--up::before   { content: "▲ "; }
.delta--down::before { content: "▼ "; }
.delta--flat::before { content: "— "; }

.delta--good    { color: var(--semantic-success); }
.delta--bad     { color: var(--semantic-danger); }
.delta--neutral { color: var(--text-muted); }