/* ============================================================================
 * Design Tokens — Tienda Canon / LENZ Servicio Técnico
 * ----------------------------------------------------------------------------
 * Single source of truth for colors, spacing, radii, shadows, typography,
 * transitions and z-index. Light + dark variants.
 *
 * Usage:
 *   @import '/src/styles/tokens.css';   (from Astro pages via <link>)
 * ========================================================================== */

/* ────────────────────────────────────────────────────────────────────────────
 * LIGHT THEME (default)
 * ────────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* ── Brand colors (fixed, do not change between themes) ─────────────── */
  --brand-canon-red:        #c0280a;
  --brand-canon-red-dark:   #7a1005;
  --brand-canon-red-light:  #e84010;
  --brand-lenz-teal:        #009EC2;
  --brand-lenz-teal-dark:   #007A92;
  --brand-lenz-teal-light:  #e0f5fb;

  /* ── Semantic aliases (map to brand per context) ─────────────────────── */
  --primary:       var(--brand-lenz-teal);
  --primary-dark:  var(--brand-lenz-teal-dark);
  --primary-light: var(--brand-lenz-teal-light);

  /* ── Neutral palette ─────────────────────────────────────────────────── */
  --neutral-0:   #ffffff;
  --neutral-50:  #f8fafc;
  --neutral-100: #f3f4f6;
  --neutral-150: #eef2f5;
  --neutral-200: #e5e7eb;
  --neutral-300: #d1d5db;
  --neutral-400: #9ca3af;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-800: #1f2937;
  --neutral-900: #0f172a;

  /* ── Surface / text ──────────────────────────────────────────────────── */
  --color-bg:            var(--neutral-50);
  --color-surface:       var(--neutral-0);
  --color-surface-alt:   var(--neutral-50);
  --color-surface-muted: var(--neutral-100);

  --color-text:          var(--neutral-900);
  --color-text-muted:    var(--neutral-500);
  --color-text-subtle:   var(--neutral-400);
  --color-text-inverse:  var(--neutral-0);

  --color-border:        var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-border-subtle: var(--neutral-150);

  /* ── Feedback colors ─────────────────────────────────────────────────── */
  --color-success:     #10b981;
  --color-success-bg:  #d1fae5;
  --color-success-fg:  #065f46;

  --color-warning:     #f59e0b;
  --color-warning-bg:  #fef3c7;
  --color-warning-fg:  #92400e;

  --color-danger:      #ef4444;
  --color-danger-bg:   #fee2e2;
  --color-danger-fg:   #991b1b;

  --color-info:        #3b82f6;
  --color-info-bg:     #dbeafe;
  --color-info-fg:     #1e3a8a;

  /* ── Status colors for servicio estados ──────────────────────────────── */
  --status-en-proceso:             #f59e0b;
  --status-pendiente-confirmacion: #3b82f6;
  --status-listo-para-recoger:     #10b981;
  --status-entregado:              #6b7280;
  --status-borrador:               #8b5cf6;

  /* ── Spacing (4px grid) ──────────────────────────────────────────────── */
  --space-0:  0;
  --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;

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 24px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.14);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', monospace;

  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-base: 14px;
  --font-size-md:   15px;
  --font-size-lg:   16px;   /* 16px min to avoid iOS zoom on focus */
  --font-size-xl:   18px;
  --font-size-2xl:  22px;
  --font-size-3xl:  28px;
  --font-size-4xl:  34px;
  --font-size-5xl:  42px;

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

  --line-height-tight:  1.15;
  --line-height-snug:   1.35;
  --line-height-normal: 1.55;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.06em;
  --letter-spacing-wider:  0.1em;
  --letter-spacing-widest: 0.18em;

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --transition-fast: 0.12s ease;
  --transition-base: 0.18s ease;
  --transition-slow: 0.3s ease;

  /* ── Z-index scale ───────────────────────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  80;
  --z-header:  90;
  --z-overlay: 200;
  --z-toast:   300;
  --z-modal:   1000;
  --z-popover: 1100;

  /* ── Layout widths ───────────────────────────────────────────────────── */
  --max-width-narrow: 640px;
  --max-width-base:   1040px;
  --max-width-wide:   1280px;

  /* ── Focus ring ──────────────────────────────────────────────────────── */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);
  --focus-ring-offset: 2px;
}

/* ────────────────────────────────────────────────────────────────────────────
 * DARK THEME
 *
 * Activated either by:
 *   - [data-theme="dark"] on <html> (user explicit choice via toggle)
 *   - @media (prefers-color-scheme: dark) when no explicit theme set
 * ────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;

  --primary:       #22c7e6;
  --primary-dark:  #0bb0d2;
  --primary-light: #134a56;

  --color-bg:            #0b1220;
  --color-surface:       #121a2b;
  --color-surface-alt:   #182339;
  --color-surface-muted: #1e2a42;

  --color-text:          #f1f5f9;
  --color-text-muted:    #94a3b8;
  --color-text-subtle:   #64748b;
  --color-text-inverse:  #0b1220;

  --color-border:        #243049;
  --color-border-strong: #334668;
  --color-border-subtle: #1b2539;

  --color-success-bg:  #063d2b;
  --color-success-fg:  #6ee7b7;

  --color-warning-bg:  #3b2807;
  --color-warning-fg:  #fcd34d;

  --color-danger-bg:   #3b0f12;
  --color-danger-fg:   #fca5a5;

  --color-info-bg:     #0c1e3a;
  --color-info-fg:     #93c5fd;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* Auto dark when OS prefers dark AND user hasn't explicitly chosen light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --primary:       #22c7e6;
    --primary-dark:  #0bb0d2;
    --primary-light: #134a56;

    --color-bg:            #0b1220;
    --color-surface:       #121a2b;
    --color-surface-alt:   #182339;
    --color-surface-muted: #1e2a42;

    --color-text:          #f1f5f9;
    --color-text-muted:    #94a3b8;
    --color-text-subtle:   #64748b;
    --color-text-inverse:  #0b1220;

    --color-border:        #243049;
    --color-border-strong: #334668;
    --color-border-subtle: #1b2539;

    --color-success-bg:  #063d2b;
    --color-success-fg:  #6ee7b7;

    --color-warning-bg:  #3b2807;
    --color-warning-fg:  #fcd34d;

    --color-danger-bg:   #3b0f12;
    --color-danger-fg:   #fca5a5;

    --color-info-bg:     #0c1e3a;
    --color-info-fg:     #93c5fd;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6);
  }
}

/* ────────────────────────────────────────────────────────────────────────────
 * CANON-THEMED PAGES (landing, public consulta)
 *
 * Opt-in via [data-brand="canon"] on <html>. Swaps the primary palette to
 * Canon red. Dark variants still apply to surfaces via the main theme rules.
 * ────────────────────────────────────────────────────────────────────────── */
[data-brand="canon"] {
  --primary:       var(--brand-canon-red);
  --primary-dark:  var(--brand-canon-red-dark);
  --primary-light: color-mix(in srgb, var(--brand-canon-red) 10%, transparent);
}

/* Explicit user choice: dark + canon */
[data-theme="dark"][data-brand="canon"] {
  --primary:       #ff5b3d;
  --primary-dark:  #e84010;
  --primary-light: #3a1208;
}

/* OS dark preference + canon, unless user explicitly picked light */
@media (prefers-color-scheme: dark) {
  :root[data-brand="canon"]:not([data-theme="light"]) {
    --primary:       #ff5b3d;
    --primary-dark:  #e84010;
    --primary-light: #3a1208;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
 * REDUCED MOTION
 * ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
 * PRINT — force light theme regardless of user choice
 * ────────────────────────────────────────────────────────────────────────── */
@media print {
  :root,
  [data-theme="dark"] {
    color-scheme: light;
    --color-bg:      #ffffff;
    --color-surface: #ffffff;
    --color-text:    #0f172a;
    --color-text-muted: #4b5563;
    --color-border:  #d8e0e8;
  }
}