/* ============================================================
   Smart Trip Planner - Design Tokens (Dark + Gold theme)
   ============================================================ */
:root {
  /* Base surfaces */
  --color-bg: #08080a;
  --color-bg-soft: #0d0d10;
  --color-surface: #131317;
  --color-surface-2: #1a1a1f;
  --color-surface-3: #20202a;
  --color-surface-glass: rgba(20, 20, 24, 0.72);

  /* Brand - dark yellow / gold */
  --color-gold-50:  #fff8d6;
  --color-gold-100: #ffe48a;
  --color-gold-200: #ffd24f;
  --color-gold:     #f5c518;
  --color-gold-600: #d4a017;
  --color-gold-700: #a87a0d;
  --color-gold-800: #6f4f08;

  /* Semantic aliases */
  --color-primary:       var(--color-gold);
  --color-primary-soft:  var(--color-gold-100);
  --color-primary-dark:  var(--color-gold-600);
  --color-secondary:     var(--color-gold-200);
  --color-accent:        #ffae00;

  /* Text */
  --color-text:          #f4f1e6;
  --color-text-strong:   #ffffff;
  --color-muted:         #b4b7c3;
  --color-muted-2:       #8c8f9a;

  /* Borders */
  --color-border:        rgba(245, 197, 24, 0.16);
  --color-border-strong: rgba(245, 197, 24, 0.34);
  --color-border-soft:   rgba(255, 255, 255, 0.06);

  /* Status */
  --color-danger:  #ff5d52;
  --color-warning: #ffb020;
  --color-success: #4ade80;

  /* Shadows */
  --shadow-soft:   0 14px 38px rgba(0, 0, 0, 0.45);
  --shadow-card:   0 12px 30px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --shadow-gold:   0 12px 36px rgba(245, 197, 24, 0.25);
  --shadow-ring-gold: 0 0 0 1px rgba(245, 197, 24, 0.4), 0 14px 40px rgba(245, 197, 24, 0.18);

  /* Gradients */
  --grad-gold: linear-gradient(135deg, #ffd24f 0%, #f5c518 35%, #d4a017 100%);
  --grad-gold-soft: linear-gradient(135deg, rgba(245, 197, 24, 0.25), rgba(212, 160, 23, 0.05));
  --grad-dark: linear-gradient(180deg, #08080a 0%, #0d0d10 100%);
  --grad-hero: radial-gradient(1200px 600px at 70% -10%, rgba(245, 197, 24, 0.18), transparent 60%),
               radial-gradient(900px 500px at 0% 100%, rgba(212, 160, 23, 0.12), transparent 60%),
               linear-gradient(180deg, #08080a 0%, #0d0d10 100%);
  --grad-card: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.0));

  /* Radii */
  --radius-sm: 0.55rem;
  --radius-md: 0.85rem;
  --radius-lg: 1.15rem;
  --radius-xl: 1.6rem;
  --radius-pill: 999px;

  /* Layout */
  --stp-nav-h: 78px;
  --stp-touch-min: 44px;
  --stp-font-form-mobile: 1rem;

  /* Type */
  --font-display: "Playfair Display", "Manrope", serif;
  --font-sans: "Manrope", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Easing */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}