/* ============================================================
   Easy City Tour – Design Tokens
   Single source of truth: colors, type, spacing, radii, shadow.
   Lifted directly from index.html (Tailwind config) + css/style.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Caveat:wght@600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
  /* ── Primary: Forest Green + Emerald ────────────────────── */
  --color-primary:                 #006d37;  /* deep forest green  */
  --color-on-primary:               #ffffff;
  --color-primary-container:       #2ecc71;  /* emerald (gradient partner) */
  --color-on-primary-container:    #005027;
  --color-primary-fixed:           #6bfe9c;
  --color-primary-fixed-dim:       #4ae183;

  /* ── Secondary: Stubbs Orange ───────────────────────────── */
  --color-secondary:               #904d00;
  --color-on-secondary:             #ffffff;
  --color-secondary-container:     #fd8b00;  /* Stubbs cap orange — primary CTA color */
  --color-on-secondary-container:  #603100;
  --color-secondary-dark:          #c46500;  /* cap shadow */
  --color-stubbs-orange:           #fd8b00;  /* alias */

  /* ── Tertiary: Teal (gradient tail) ─────────────────────── */
  --color-tertiary:                #006b5f;
  --color-on-tertiary:              #ffffff;
  --color-tertiary-container:      #40c6b3;
  --color-on-tertiary-container:   #004e45;

  /* ── Surfaces (warm ivory stack) ────────────────────────── */
  --color-surface:                 #faf9f5;  /* Level 0 — base */
  --color-surface-container-low:   #f4f4f0;  /* Level 1 — sections */
  --color-surface-container:       #efeeea;  /* Level 2 — cards */
  --color-surface-container-high:  #e9e8e4;
  --color-surface-container-highest: #e3e2df; /* filled inputs */
  --color-surface-container-lowest:  #ffffff; /* elevated cards */
  --color-surface-bright:          #faf9f5;
  --color-surface-dim:             #dbdad6;
  --color-surface-variant:         #e3e2df;
  --color-surface-tint:            #006d37;

  /* ── Text ───────────────────────────────────────────────── */
  --color-on-surface:              #1b1c1a;  /* near-black, never pure */
  --color-on-surface-variant:      #3d4a3e;  /* long-form body */
  --color-outline:                 #6c7b6d;  /* muted meta / captions */
  --color-outline-variant:         #bbcbbb;  /* ghost borders */

  /* ── Inverse / dark ─────────────────────────────────────── */
  --color-inverse-surface:         #2f312e;
  --color-inverse-on-surface:      #f2f1ed;
  --color-inverse-primary:         #4ae183;

  /* ── Status ─────────────────────────────────────────────── */
  --color-error:                   #ba1a1a;
  --color-error-container:         #ffdad6;
  --color-on-error:                 #ffffff;
  --color-on-error-container:      #93000a;
  --color-warning-bg:              #fffbeb;  /* amber-50 */
  --color-warning-border:          #fde68a;  /* amber-200 */
  --color-warning-text:            #92400e;  /* amber-800 */
  --color-success-bg:              #e6f4ed;  /* active chip bg */

  /* ── Background ─────────────────────────────────────────── */
  --color-background:              #faf9f5;
  --color-on-background:           #1b1c1a;

  /* ── Stubbs palette (mascot) ────────────────────────────── */
  --stubbs-outline:                #1a1a1a;
  --stubbs-body:                   #f4f1e9;
  --stubbs-body-shadow:            #e8e3d8;
  --stubbs-wing:                   #ddd8cf;
  --stubbs-cap:                    #fd8b00;
  --stubbs-cap-shadow:             #c46500;

  /* ── Signature gradients ────────────────────────────────── */
  --gradient-primary:              linear-gradient(135deg, #006d37 0%, #2ecc71 100%);
  --gradient-primary-hover:        linear-gradient(135deg, #005a2d 0%, #25b862 100%);
  --gradient-auth-hero:            linear-gradient(150deg, #006d37 0%, #2ecc71 50%, #40c6b3 100%);
  --gradient-form-hero:            linear-gradient(135deg, rgba(0,109,55,0.93) 0%, rgba(26,140,80,0.88) 55%, rgba(46,204,113,0.82) 100%);

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Bebas Neue', sans-serif;
  --font-voice:   'Caveat', cursive;
  --font-icon:    'Material Symbols Outlined';
  --font-icon: 'Material Symbols Outlined';

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold: 800;

  /* Type scale (px) */
  --fs-eyebrow:  10px;  /* uppercase tracked micro-labels */
  --fs-caption:  12px;
  --fs-body-sm:  13px;
  --fs-body:     14px;
  --fs-body-lg:  16px;
  --fs-title:    18px;
  --fs-h3:       20px;
  --fs-h2:       24px;
  --fs-h1:       32px;
  --fs-display:  40px;

  /* Line heights */
  --lh-tight:   1.2;
  --lh-snug:    1.3;
  --lh-normal:  1.45;
  --lh-body:    1.5;

  /* Tracking */
  --tr-tighter:  -0.025em;  /* display headlines */
  --tr-tight:    -0.01em;   /* titles */
  --tr-normal:   0;
  --tr-wide:     0.05em;
  --tr-widest:   0.2em;     /* eyebrows, uppercase labels */

  /* ── Spacing (4px scale) ────────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-sm:   4px;    /* minimum allowed */
  --radius-md:   8px;
  --radius-lg:   16px;   /* form fields */
  --radius-xl:   20px;   /* badges */
  --radius-2xl:  24px;   /* cards — DESIGN.md signature */
  --radius-3xl:  32px;   /* hero modals, auth card */
  --radius-full: 9999px; /* pills */

  /* ── Shadows (ambient, directionless) ───────────────────── */
  --shadow-none: none;
  --shadow-ghost: 0 0 0 1px rgba(187,203,187,0.3), 0 8px 32px rgba(0,109,55,0.08);
  --shadow-atmospheric: 0 12px 32px rgba(27, 28, 26, 0.06);
  --shadow-card-hover:  0 4px 16px rgba(0,109,55,0.10);
  --shadow-cta-orange:  0 16px 40px rgba(253,139,0,0.35);
  --shadow-cta-green:   0 12px 32px rgba(0,109,55,0.25);
  --shadow-auth-card:   0 24px 48px rgba(0,109,55,0.25);
  --shadow-inset-ghost: inset 0 0 0 1px rgba(187,203,187,0.15);

  /* ── Blur ───────────────────────────────────────────────── */
  --blur-glass: 20px;
  --blur-glass-sm: 10px;

  /* ── Motion ─────────────────────────────────────────────── */
  --dur-fast:    150ms;
  --dur-medium:  280ms;
  --dur-slow:    400ms;
  --ease-default: ease;
  --ease-in-out:  ease-in-out;
}

/* ============================================================
   SEMANTIC ELEMENTS — match the implemented Tailwind classes
   ============================================================ */

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-on-surface);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .ds-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tr-tighter);
  line-height: var(--lh-tight);
  color: var(--color-on-surface);
}

h2, .ds-h2 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  color: var(--color-on-surface);
}

h3, .ds-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-snug);
  color: var(--color-on-surface);
}

.ds-title {
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-snug);
}

p, .ds-body {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-on-surface-variant);
}

small, .ds-caption {
  font-size: var(--fs-caption);
  color: var(--color-on-surface-variant);
}

.ds-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tr-widest);
  color: var(--color-primary);
}

.ds-meta {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--color-outline);
}

code, .ds-mono {
  /* No explicit mono in the app; we use Jakarta at a small size with wide tracking. */
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--fs-caption);
}

/* ── Material Symbols defaults ──────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}