/* ==========================================================================
   Kombine Design System — Tokens
   Pomodoro + task management + Wear OS companion
   Aesthetic: minimalist Bauhaus — primary colors as punctuation,
   grayscale surfaces, geometric forms, generous negative space.
   ========================================================================== */

/* ------- Fonts -------
   The Android app ships with FontFamily.Default (Roboto). For web we
   substitute Inter as the UI face (closest modern-geometric humanist match
   across platforms). Bauhaus display accents use Archivo Black — a strict
   geometric grotesque that echoes the posters/logo.

   SUBSTITUTION NOTE: The app uses system Roboto — if a custom typeface is
   ever adopted, drop TTFs into /fonts and swap the @font-face below.
   -------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Archivo+Black&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============ BRAND — Bauhaus primaries (from logo) ============ */
  --brand-blue:       #1E3FA8;   /* deep cobalt — logo left stroke */
  --brand-red:        #E53935;   /* vermilion — logo right stroke */
  --brand-yellow:     #F5C518;   /* mustard yellow — logo accent */

  /* ============ CORE PALETTE (KombineColors.kt) ============ */
  --white:            #FFFFFF;
  --black:            #000000;
  --off-white:        #F9F9F9;
  --light-grey:       #E5E5E5;
  --medium-grey:      #6B7280;
  --dark-grey:        #2A2A2A;
  --disabled:         #9CA3AF;

  /* Primary UI accent — muted blue-grey (NOT cobalt; cobalt is brand-only) */
  --blue-grey:        #6B7280;

  /* Orange — action / live state / overdue */
  --orange:           #FF6B35;
  --orange-light:     #FFAB91;
  --overdue-alpha:    rgba(255, 107, 53, 0.20);

  /* Lavender tint used across bottom sheets, chips, active tab bg */
  --lavender-surface: #F3F0F8;   /* observed tab-bar + sheet background */
  --lavender-100:     #EEE8F7;   /* active chip / selected pill */

  /* ============ SEMANTIC — Priority ============ */
  --priority-low:     #98BCFF;   /* blue */
  --priority-medium:  #FF8556;   /* orange */
  --priority-high:    #FF2727;   /* red */
  --priority-none:    #D1D5DB;   /* grey */

  /* ============ SEMANTIC — Energy ============ */
  --energy-low:       #4DB6AC;   /* teal — 1 dot */
  --energy-medium:    #FFB74D;   /* amber — 2 dots */
  --energy-high:      #FF7043;   /* deep orange — 3 dots */

  /* ============ SEMANTIC — Status ============ */
  --success:          #10B981;
  --error:            #EF4444;
  --info:             #6B7280;

  /* ============ SESSION COLORS (KombineSessionColors.kt) ============ */
  /* Pomodoro (classic 25min block) */
  --pomo-work:        #E53E3E;
  --pomo-learning:    #3182CE;
  --pomo-meeting:     #D69E2E;
  --pomo-reading:     #38A169;
  --pomo-creative:    #805AD5;
  --pomo-admin:       #718096;
  --pomo-exercise:    #38B2AC;
  --pomo-planning:    #4A5568;

  /* Flow (deep-work, unbounded) */
  --flow-work:        #4299E1;
  --flow-learning:    #0078D4;
  --flow-creative:    #805AD5;
  --flow-admin:       #68D391;
  --flow-exercise:    #4FD1C7;
  --flow-planning:    #9F7AEA;

  /* Break */
  --break-short:      #81C784;
  --break-long:       #4CAF50;

  /* ============ TIMER RING ============ */
  --ring-primary:     #6B7280;
  --ring-secondary:   rgba(156, 163, 175, 0.3);
  --ring-progress:    var(--orange);

  /* ============ SEMANTIC SURFACES ============ */
  --bg:               var(--white);
  --bg-subtle:        var(--off-white);
  --bg-tinted:        var(--lavender-surface);
  --surface:          var(--white);
  --surface-raised:   var(--white);
  --surface-sunken:   var(--lavender-surface);
  --card-bg:          #FFFFFF;

  --fg:               var(--dark-grey);
  --fg-muted:         var(--medium-grey);
  --fg-subtle:        var(--disabled);
  --fg-inverse:       var(--white);

  --border:           var(--light-grey);
  --border-strong:    #D1D5DB;
  --divider:          #EEEEEE;

  /* ============ TYPE ============ */
  --font-ui:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display:     'Archivo Black', 'Inter', sans-serif;  /* Bauhaus accents */
  --font-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Scale — mirrors Material 3 sizing used in KombineTypography.kt */
  --text-display-lg:  57px;
  --text-display-md:  45px;
  --text-display-sm:  36px;
  --text-h1:          32px;
  --text-h2:          28px;
  --text-h3:          24px;
  --text-title-lg:    22px;
  --text-title-md:    16px;
  --text-title-sm:    14px;
  --text-body-lg:     16px;
  --text-body-md:     14px;
  --text-body-sm:     12px;
  --text-label-lg:    14px;
  --text-label-md:    12px;
  --text-label-sm:    11px;

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

  /* Timer numerals — oversized, bold, tabular */
  --text-timer:       64px;

  /* ============ SPACING (KombineSpacing.kt) ============ */
  --space-xxxs: 2px;
  --space-xxs:  4px;
  --space-xs:   8px;
  --space-sm:   12px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;

  --screen-padding: 16px;
  --card-padding:   16px;

  /* ============ RADII (KombineShapes.kt) ============ */
  --radius-xs:    4px;    /* extraSmall */
  --radius-sm:    8px;    /* small — buttons */
  --radius-md:    12px;   /* medium — cards */
  --radius-lg:    16px;   /* large — dialogs, sheets */
  --radius-xl:    28px;   /* extraLarge — FABs, pills */
  --radius-full:  9999px;

  /* ============ ELEVATION ============ */
  /* Shadows are whisper-quiet — this is a flat, paper-like UI. */
  --shadow-none:    none;
  --shadow-sm:      0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-md:      0 2px 8px rgba(17, 24, 39, 0.06);
  --shadow-lg:      0 8px 24px rgba(17, 24, 39, 0.08);
  --shadow-sheet:   0 -4px 24px rgba(17, 24, 39, 0.10);

  /* ============ MOTION ============ */
  --ease-standard:  cubic-bezier(0.2, 0, 0, 1);       /* Material 3 emphasised */
  --ease-out:       cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:        cubic-bezier(0.4, 0.0, 1, 1);
  --dur-fast:       150ms;
  --dur-base:       250ms;
  --dur-slow:       400ms;
  --dur-ring:       300ms;   /* timer ring progress anim */
}

/* ============ DARK MODE ============
   Deliberately NOT wired to prefers-color-scheme — the reference app ships
   light-mode in the provided screenshots, and a half-implemented system
   dark mode makes components illegible (lavender nav on black surface,
   etc). To opt into dark, add `class="dark"` on <html> and we'll override.
   A full dark-mode pass (surface-by-surface) is a follow-up task. */
html.dark {
  --bg:             #2A2A2A;
  --bg-subtle:      #1F1F1F;
  --bg-tinted:      #2D2838;
  --surface:        #2A2A2A;
  --surface-raised: #333333;
  --card-bg:        #333333;

  --fg:             var(--off-white);
  --fg-muted:       #B0B5BD;
  --fg-subtle:      #6B7280;

  --border:         #3A3A3A;
  --divider:        #363636;
}

/* ==========================================================================
   Semantic helper classes — apply these to get consistent type treatments.
   ========================================================================== */

body, .body {
  font-family: var(--font-ui);
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-ui);
  font-size: var(--text-h1);
  line-height: 40px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-ui);
  font-size: var(--text-h2);
  line-height: 36px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-ui);
  font-size: var(--text-h3);
  line-height: 32px;
  font-weight: var(--weight-semibold);
  color: var(--fg);
  margin: 0;
}

.title-lg {
  font-size: var(--text-title-lg);
  font-weight: var(--weight-medium);
  line-height: 28px;
}

.title-md {
  font-size: var(--text-title-md);
  font-weight: var(--weight-semibold);
  line-height: 24px;
}

.title-sm {
  font-size: var(--text-title-sm);
  font-weight: var(--weight-semibold);
  line-height: 20px;
}

.body-lg { font-size: var(--text-body-lg); line-height: 24px; }
.body-md { font-size: var(--text-body-md); line-height: 20px; }
.body-sm { font-size: var(--text-body-sm); line-height: 16px; color: var(--fg-muted); }

.label-lg { font-size: var(--text-label-lg); font-weight: var(--weight-medium); letter-spacing: 0.01em; }
.label-md { font-size: var(--text-label-md); font-weight: var(--weight-medium); letter-spacing: 0.04em; }
.label-sm { font-size: var(--text-label-sm); font-weight: var(--weight-medium); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-muted); }

.display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.timer-numerals {
  font-family: var(--font-ui);
  font-size: var(--text-timer);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1;
}

.mono { font-family: var(--font-mono); }

code, pre {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg-subtle);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}