/* Purpose: Single source of truth for all design tokens. Nothing styled here — variables only.
   HikiePsyche — India-first travel discovery platform.
   Palette derived from brand logo (amber #F0B840 + charcoal) extended with earthy outdoor tones.
   Fonts: Clash Display (geometric display, echoes the HIKIE mark) + Hanken Grotesk (humanist body)
          + Space Mono (data/badges). Self-hosted — see base.css @font-face. */

:root {
  /* ---------------------------------------------------------------------
     COLORS — brand
     accent  = amber pulled straight from the PSYCHE logotype (#F0B840)
     primary = deep forest/pine green (adventurous, trustworthy, outdoor)
     --------------------------------------------------------------------- */
  --color-primary:        #1B5E48;   /* forest green */
  --color-primary-dark:   #123E30;   /* deep pine — hovers, dark surfaces */
  --color-primary-light:  #2E7D5E;
  --color-secondary:      #2E7D96;   /* sky / glacier blue */
  --color-secondary-dark: #1F5C71;
  --color-accent:         #F0B840;   /* logo amber / sunset gold */
  --color-accent-dark:    #D99B2B;   /* amber hover */
  --color-accent-soft:    #FBE9C2;   /* amber wash for chips/badges */

  /* COLORS — surfaces & text */
  --color-bg:           #FBFAF7;   /* warm off-white */
  --color-bg-alt:       #F3EEE3;   /* sand beige section band */
  --color-surface:      #FFFFFF;
  --color-surface-alt:  #F7F4EC;
  --color-text:         #14201B;   /* near-black charcoal, green-tinted */
  --color-text-muted:   #5C6660;
  --color-text-invert:  #FBFAF7;
  --color-border:       #E5DFD2;
  --color-border-strong:#CFC7B5;

  /* COLORS — feedback */
  --color-success:  #2E9E5B;
  --color-warning:  #E0A52E;
  --color-error:    #D24A3D;
  --color-info:     #2E7D96;

  /* COLORS — utility ramps for data viz (confidence score, etc.) */
  --color-score-low:  #D24A3D;
  --color-score-mid:  #E0A52E;
  --color-score-high: #2E9E5B;

  /* ---------------------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------------------- */
  --font-heading: 'Clash Display', 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  --text-xs:   0.75rem;   --text-sm:   0.875rem;
  --text-base: 1rem;      --text-md:   1.125rem;
  --text-lg:   1.25rem;   --text-xl:   1.5rem;
  --text-2xl:  2rem;      --text-3xl:  2.5rem;
  --text-4xl:  3.5rem;    --text-5xl:  4.5rem;
  --text-6xl:  6rem;

  --leading-tight:  1.1;  --leading-snug:   1.3;
  --leading-normal: 1.6;  --leading-loose:  1.8;
  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide:  0.08em;

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

  /* ---------------------------------------------------------------------
     SPACING
     --------------------------------------------------------------------- */
  --space-1:  0.25rem;  --space-2:  0.5rem;
  --space-3:  0.75rem;  --space-4:  1rem;
  --space-5:  1.25rem;  --space-6:  1.5rem;
  --space-8:  2rem;     --space-10: 2.5rem;
  --space-12: 3rem;     --space-16: 4rem;
  --space-20: 5rem;     --space-24: 6rem;
  --space-32: 8rem;

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --container-sm:  640px;   --container-md:  768px;
  --container-lg:  1024px;  --container-xl:  1280px;
  --container-2xl: 1440px;  --container-max: 1920px;
  --container-pad: var(--space-5);
  --grid-cols: 12;
  --grid-gap:  var(--space-6);
  --header-h:  72px;

  /* ---------------------------------------------------------------------
     BORDERS & RADII
     --------------------------------------------------------------------- */
  --radius-sm: 6px;  --radius-md: 12px;
  --radius-lg: 20px; --radius-xl: 28px;  --radius-full: 9999px;
  --border-thin:   1px solid var(--color-border);
  --border-normal: 2px solid var(--color-border);

  /* ---------------------------------------------------------------------
     SHADOWS — soft, editorial
     --------------------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(20,32,27,0.06);
  --shadow-md: 0 6px 20px rgba(20,32,27,0.08);
  --shadow-lg: 0 14px 40px rgba(20,32,27,0.12);
  --shadow-xl: 0 28px 70px rgba(20,32,27,0.16);
  --shadow-focus: 0 0 0 3px rgba(46,125,150,0.35);

  /* ---------------------------------------------------------------------
     TRANSITIONS
     --------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0.0, 1, 1);
  --ease-inout:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;  --duration-base:   250ms;
  --duration-slow:   400ms;  --duration-slower: 700ms;

  /* ---------------------------------------------------------------------
     Z-INDEX
     --------------------------------------------------------------------- */
  --z-base: 0;       --z-raised: 10;
  --z-dropdown: 100; --z-sticky: 200;
  --z-overlay: 300;  --z-modal: 400;
  --z-drawer: 450;   --z-toast: 500;
}