/* ==========================================================================
   RideOn Tour Travels — Color Tokens
   Inspired by: Pink City sandstone, Amber Fort terracotta, City Palace royal
   blue, marigold garlands, peacock motifs, camel-leather saddlery, desert
   dusk, and white marble (Jal Mahal / Albert Hall).
   ========================================================================== */

:root {
  /* ---- Base palette (raw hues, do not use directly in components) ---- */

  /* Terracotta / Sandstone — the walls of the Pink City at golden hour */
  --base-terracotta-900: #5C2314;
  --base-terracotta-700: #8F3F1F;
  --base-terracotta-600: #A94A25;
  --base-terracotta-500: #C1592E;   /* primary */
  --base-terracotta-400: #D3764F;
  --base-terracotta-300: #E3A07D;
  --base-terracotta-200: #F0C7AC;
  --base-terracotta-100: #F7E3D3;

  /* Royal Blue — City Palace shutters, blue pottery, Rajput banners */
  --base-royal-900: #0F1F3D;
  --base-royal-700: #1B3A6B;   /* secondary */
  --base-royal-600: #274B82;
  --base-royal-500: #3D5A8A;
  --base-royal-300: #7C93B8;
  --base-royal-100: #DCE4F0;

  /* Marigold Gold — festival garlands, palace gilding, temple offerings */
  --base-gold-700: #A9761E;
  --base-gold-600: #C9962C;
  --base-gold-500: #E0A62E;   /* accent / CTA highlight */
  --base-gold-400: #EBBE5C;
  --base-gold-200: #F8E3B0;

  /* Peacock Teal — Rajasthani textile embroidery, miniature paintings */
  --base-peacock-700: #0A4F4F;
  --base-peacock-500: #0E6E6E;
  --base-peacock-300: #4FA3A3;
  --base-peacock-100: #D6ECEC;

  /* Warm neutrals — sandstone dust to camel leather to ink */
  --base-sand-50:  #FBF7F2;   /* white marble */
  --base-sand-100: #F5EDE3;
  --base-sand-200: #E8DBCB;
  --base-sand-300: #D4C2AC;
  --base-sand-400: #B49C82;
  --base-sand-500: #8C7863;   /* camel leather */
  --base-sand-600: #6B5A48;
  --base-sand-700: #4A3D30;
  --base-sand-800: #332A21;
  --base-sand-900: #1F1912;

  /* Status */
  --base-green-600: #3F7D4F;
  --base-green-100: #DCEEDF;
  --base-amber-600: #D9932A;
  --base-amber-100: #F8E7C6;
  --base-red-600:   #B23A2E;
  --base-red-100:   #F5DAD6;

  /* ---- Semantic tokens (use these) ---- */

  /* Brand */
  --color-primary: var(--base-terracotta-500);
  --color-primary-hover: var(--base-terracotta-600);
  --color-primary-active: var(--base-terracotta-700);
  --color-primary-tint: var(--base-terracotta-100);
  --color-primary-contrast: #FFFFFF;

  --color-secondary: var(--base-royal-700);
  --color-secondary-hover: var(--base-royal-600);
  --color-secondary-tint: var(--base-royal-100);
  --color-secondary-contrast: #FFFFFF;

  --color-accent-gold: var(--base-gold-500);
  --color-accent-gold-hover: var(--base-gold-600);
  --color-accent-gold-tint: var(--base-gold-200);

  --color-accent-peacock: var(--base-peacock-500);
  --color-accent-peacock-tint: var(--base-peacock-100);

  /* CTA — deep terracotta by default; reserve gold for secondary emphasis */
  --color-cta: var(--base-terracotta-500);
  --color-cta-hover: var(--base-terracotta-600);
  --color-cta-active: var(--base-terracotta-700);
  --color-cta-contrast: #FFFFFF;

  /* Feedback */
  --color-success: var(--base-green-600);
  --color-success-tint: var(--base-green-100);
  --color-warning: var(--base-amber-600);
  --color-warning-tint: var(--base-amber-100);
  --color-error: var(--base-red-600);
  --color-error-tint: var(--base-red-100);

  /* Text */
  --text-1: var(--base-sand-900);      /* headings */
  --text-2: var(--base-sand-700);      /* body */
  --text-muted: var(--base-sand-500);
  --text-on-dark: var(--base-sand-50);
  --text-on-primary: #FFFFFF;
  --text-link: var(--base-royal-700);
  --text-link-hover: var(--base-royal-600);

  /* Surfaces — light theme (default) */
  --surface-page: var(--base-sand-50);
  --surface-card: #FFFFFF;
  --surface-sunken: var(--base-sand-100);
  --surface-elevated: #FFFFFF;
  --border-subtle: var(--base-sand-200);
  --border-strong: var(--base-sand-300);

  color-scheme: light;
}

/* ---- Dark theme ---- */
[data-theme="dark"] {
  --text-1: var(--base-sand-50);
  --text-2: var(--base-sand-200);
  --text-muted: var(--base-sand-400);
  --text-link: var(--base-gold-400);
  --text-link-hover: var(--base-gold-200);

  --surface-page: #17110C;
  --surface-card: #241C15;
  --surface-sunken: #2E251C;
  --surface-elevated: #2E251C;
  --border-subtle: #3A2E22;
  --border-strong: #4A3D30;

  --color-primary-tint: rgba(193, 89, 46, 0.18);
  --color-secondary-tint: rgba(27, 58, 107, 0.24);
  --color-accent-gold-tint: rgba(224, 166, 46, 0.16);

  color-scheme: dark;
}