/**
 * Brand Tokens: ON Custom Fit
 *
 * Matches the on.com design language — black buttons, Inter font,
 * white background, clean and minimal.
 *
 * Loading order in base.html:
 * 1. tokens.css            (base defaults)
 * 2. tokens-on.css         (this file — ON overrides)
 * 3. styles.css            (component styles using tokens)
 */

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

:root {
  /* ============================================
     ON BRAND COLORS
     ============================================ */

  /* Primary Brand Color — ON Orange (accent only) */
  --color-primary: #c45500;
  --color-primary-hover: #d46c19;
  --color-primary-dark: #a93d00;

  /* Backgrounds — light theme */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #eeeeee;

  /* Text — black on white */
  --text-primary: #000000;
  --text-secondary: #525252;
  --text-tertiary: #737373;
  --text-placeholder: #a3a3a3;

  /* Borders */
  --border-light: #e5e5e5;
  --border-dark: #cccccc;

  /* Status Colors */
  --color-success: #00a86b;
  --color-error: #c80000;
  --color-warning: #c45500;
  --color-info: #0066cc;

  /* State Colors */
  --state-disabled: #e0e0e0;
  --state-disabled-text: #9e9e9e;
  --state-ready: rgba(0, 168, 107, 0.95);
  --state-ready-glow: rgba(0, 200, 130, 0.7);
  --state-inactive: rgba(158, 158, 158, 0.35);

  /* Camera overlay colors */
  --overlay-dark: rgba(0, 0, 0, 0.5);
  --overlay-light: rgba(0, 0, 0, 0.2);
  --overlay-semi: rgba(0, 0, 0, 0.7);

  /* ============================================
     TYPOGRAPHY — Inter (matches on.com)
     ============================================ */

  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ============================================
     LAYOUT — tighter radius (matches on.com)
     ============================================ */

  --radius-sm: 4px;

  /* ============================================
     COMPONENT OVERRIDES
     ============================================ */

  /* Button — black (on.com uses black primary buttons) */
  --button-bg: #000000;
  --button-text: #ffffff;
  --button-hover-bg: #1a1a1a;
  --button-disabled-bg: var(--state-disabled);
  --button-disabled-text: var(--state-disabled-text);

  /* Input */
  --input-bg: #ffffff;
  --input-text: var(--text-primary);
  --input-border: var(--border-light);
  --input-border-focus: var(--color-primary);
  --input-placeholder: var(--text-placeholder);

  /* Card */
  --card-bg: #ffffff;
  --card-border: var(--border-light);

  /* Progress bar */
  --progress-bg: rgba(0, 0, 0, 0.1);
  --progress-fill: var(--color-primary);

  /* Banner */
  --banner-bg: rgba(255, 255, 255, 0.95);
  --banner-border: var(--color-primary);
  --banner-text: var(--text-primary);
  --banner-accent: var(--color-primary);

  /* Camera Shutter — gray when not ready, green when ready */
  --shutter-bg-inactive: var(--state-disabled);
  --shutter-text-inactive: var(--state-disabled-text);
  --shutter-bg-ready: var(--state-ready);
  --shutter-shadow-inactive: none;
  --shutter-shadow-ready: 0 4px 20px var(--state-ready-glow);

  /* Status pill */
  --status-bg: rgba(255, 255, 255, 0.92);
  --status-text: var(--text-primary);

  /* Shadows — subtle for light theme */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-camera: 0 0 20px rgba(0, 0, 0, 0.4);
  --shadow-camera-ready: 0 0 20px var(--state-ready-glow);
}