/**
 * Brand Tokens: Meistersohle
 *
 * Palette: Pantone 2026 Cloud Dancer base (#F0EEE9) with Meistersohle
 * purple (#9b51e0) and cyan (#0693e3) as brand accents — matching the
 * meistersohle.laufwerk-zwickau.de visual identity.
 *
 * Loading order in base.html:
 * 1. tokens.css                  (base defaults)
 * 2. tokens-meistersohle.css     (this file — Meistersohle 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 {
  /* ============================================
     MEISTERSOHLE BRAND COLORS
     ============================================ */

  /* Primary Brand Color — Meistersohle Purple */
  --color-primary: #9b51e0;
  --color-primary-hover: #8a3fd4;
  --color-primary-dark: #7228c8;

  /* Accent — Meistersohle Cyan */
  --color-accent: #0693e3;
  --color-accent-hover: #057bc5;

  /* Backgrounds — Pantone 2026 Cloud Dancer warm off-white */
  --bg-primary: #F0EEE9;
  --bg-secondary: #E8E5DF;
  --bg-tertiary: #DEDAD2;

  /* Text — near-black on warm white */
  --text-primary: #2B2B2B;
  --text-secondary: #555555;
  --text-tertiary: #7A7A7A;
  --text-placeholder: #ABABAB;

  /* Borders */
  --border-light: #D8D4CC;
  --border-dark: #C0BBB1;

  /* Status Colors */
  --color-success: #34DD87;
  --color-error: #e53e3e;
  --color-warning: #f6ad55;
  --color-info: #0693e3;

  /* State Colors */
  --state-disabled: #D8D4CC;
  --state-disabled-text: #9A9690;
  --state-ready: rgba(52, 221, 135, 0.95);
  --state-ready-glow: rgba(52, 221, 135, 0.65);
  --state-inactive: rgba(155, 81, 224, 0.25);

  /* 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 (clean, modern)
     ============================================ */

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

  /* ============================================
     LAYOUT — rounded pill-style (matches meistersohle.de)
     ============================================ */

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 9999px;

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

  /* Button — Meistersohle purple with white text */
  --button-bg: #9b51e0;
  --button-text: #ffffff;
  --button-hover-bg: #8a3fd4;
  --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(155, 81, 224, 0.15);
  --progress-fill: var(--color-primary);

  /* Banner */
  --banner-bg: rgba(240, 238, 233, 0.97);
  --banner-border: var(--color-primary);
  --banner-text: var(--text-primary);
  --banner-accent: var(--color-primary);

  /* Camera Shutter — purple-tinted inactive, signal 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(240, 238, 233, 0.95);
  --status-text: var(--text-primary);

  /* Shadows — warm and subtle */
  --shadow-sm: 0 1px 3px rgba(43, 43, 43, 0.08);
  --shadow-md: 0 4px 12px rgba(43, 43, 43, 0.10);
  --shadow-lg: 0 8px 24px rgba(43, 43, 43, 0.14);
  --shadow-camera: 0 0 20px rgba(0, 0, 0, 0.4);
  --shadow-camera-ready: 0 0 20px var(--state-ready-glow);
}