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

:root {
  /* ============ BRAND — Bauhaus primaries (from logo) ============ */
  --brand-blue:       #1E3FA8;
  --brand-red:        #E53935;
  --brand-yellow:     #F5C518;

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

  --blue-grey:        #6B7280;

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

  /* Lavender tint */
  --lavender-surface: #F3F0F8;
  --lavender-100:     #EEE8F7;

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

  /* ============ SEMANTIC — Energy ============ */
  --energy-low:       #4DB6AC;
  --energy-medium:    #FFB74D;
  --energy-high:      #FF7043;

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

  /* ============ SESSION COLORS ============ */
  --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-work:        #4299E1;
  --flow-learning:    #0078D4;
  --flow-creative:    #805AD5;
  --flow-admin:       #68D391;
  --flow-exercise:    #4FD1C7;
  --flow-planning:    #9F7AEA;

  --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;
  --font-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --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;

  --text-timer:       64px;

  /* ============ SPACING ============ */
  --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 ============ */
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    28px;
  --radius-full:  9999px;

  /* ============ ELEVATION ============ */
  --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);
  --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;
}

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;
}