/* ============================================================
   TRAVEL PLANNER — DESIGN TOKENS
   Auto-generated from DESIGN.md (Stitch AI)
   Single source of truth. Never hardcode values in components.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {

  /* ----------------------------------------------------------
     COLORS — Surface
  ---------------------------------------------------------- */
  --color-surface:                   #fcf8ff;
  --color-surface-dim:               #dcd8e5;
  --color-surface-bright:            #fcf8ff;
  --color-surface-container-lowest:  #ffffff;
  --color-surface-container-low:     #f5f2ff;
  --color-surface-container:         #f0ecf9;
  --color-surface-container-high:    #eae6f3;
  --color-surface-container-highest: #e4e1ee;
  --color-surface-variant:           #e4e1ee;
  --color-surface-tint:              #4e44e2;
  --color-on-surface:                #1b1b24;
  --color-on-surface-variant:        #464555;
  --color-inverse-surface:           #302f39;
  --color-inverse-on-surface:        #f3effc;

  /* ----------------------------------------------------------
     COLORS — Primary (Indigo) — High-priority actions
  ---------------------------------------------------------- */
  --color-primary:                   #3e32d3;
  --color-primary-container:         #5850ec;
  --color-on-primary:                #ffffff;
  --color-on-primary-container:      #e9e5ff;
  --color-inverse-primary:           #c3c0ff;
  --color-primary-fixed:             #e2dfff;
  --color-primary-fixed-dim:         #c3c0ff;
  --color-on-primary-fixed:          #0f0069;
  --color-on-primary-fixed-variant:  #3424ca;

  /* ----------------------------------------------------------
     COLORS — Secondary (Emerald) — Success, confirmed, AI
  ---------------------------------------------------------- */
  --color-secondary:                 #006c49;
  --color-secondary-container:       #6cf8bb;
  --color-on-secondary:              #ffffff;
  --color-on-secondary-container:    #00714d;
  --color-secondary-fixed:           #6ffbbe;
  --color-secondary-fixed-dim:       #4edea3;
  --color-on-secondary-fixed:        #002113;
  --color-on-secondary-fixed-variant:#005236;

  /* ----------------------------------------------------------
     COLORS — Tertiary (Amber) — Warnings, pending
  ---------------------------------------------------------- */
  --color-tertiary:                  #724700;
  --color-tertiary-container:        #935c00;
  --color-on-tertiary:               #ffffff;
  --color-on-tertiary-container:     #ffe4c7;
  --color-tertiary-fixed:            #ffddb8;
  --color-tertiary-fixed-dim:        #ffb95f;
  --color-on-tertiary-fixed:         #2a1700;
  --color-on-tertiary-fixed-variant: #653e00;

  /* ----------------------------------------------------------
     COLORS — Error / Status
  ---------------------------------------------------------- */
  --color-error:                     #ba1a1a;
  --color-error-container:           #ffdad6;
  --color-on-error:                  #ffffff;
  --color-on-error-container:        #93000a;

  /* ----------------------------------------------------------
     COLORS — Background & Outline
  ---------------------------------------------------------- */
  --color-background:                #fcf8ff;
  --color-on-background:             #1b1b24;
  --color-outline:                   #777587;
  --color-outline-variant:           #c7c4d8;

  /* ----------------------------------------------------------
     COLORS — Semantic aliases (use these in components)
  ---------------------------------------------------------- */
  --color-canvas:                    #f9fafb;   /* Level 0 background */
  --color-card:                      #ffffff;   /* Level 1 elevated card */
  --color-border:                    #e5e7eb;   /* Card & input borders */
  --color-input-fill:                #f3f4f6;   /* Input focus fill */

  /* ----------------------------------------------------------
     TYPOGRAPHY — Font family
  ---------------------------------------------------------- */
  --font-family-base: 'Plus Jakarta Sans', sans-serif;

  /* Font sizes */
  --font-size-headline-lg: 32px;
  --font-size-headline-md: 24px;
  --font-size-headline-sm: 18px;
  --font-size-body-lg:     16px;
  --font-size-body-md:     14px;
  --font-size-label-md:    12px;
  --font-size-label-sm:    11px;

  /* Font weights */
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 600;
  --font-weight-headline-sm: 600;
  --font-weight-body-lg:     400;
  --font-weight-body-md:     400;
  --font-weight-label-md:    600;
  --font-weight-label-sm:    500;

  /* Line heights */
  --line-height-headline-lg: 1.2;
  --line-height-headline-md: 1.3;
  --line-height-headline-sm: 1.4;
  --line-height-body-lg:     1.6;
  --line-height-body-md:     1.5;
  --line-height-label-md:    1;
  --line-height-label-sm:    1;

  /* Letter spacing */
  --letter-spacing-label-md: 0.02em;

  /* ----------------------------------------------------------
     SPACING
  ---------------------------------------------------------- */
  --space-base:          4px;
  --space-xs:            8px;
  --space-sm:            16px;
  --space-md:            24px;
  --space-lg:            32px;
  --space-xl:            48px;
  --space-gutter:        24px;
  --space-margin-mobile: 16px;
  --space-container-max: 1280px;

  /* ----------------------------------------------------------
     BORDER RADIUS
  ---------------------------------------------------------- */
  --radius-sm:      0.25rem;   /* 4px  */
  --radius-default: 0.5rem;    /* 8px  — standard components */
  --radius-md:      0.75rem;   /* 12px */
  --radius-lg:      1rem;      /* 16px — large containers, modals */
  --radius-xl:      1.5rem;    /* 24px */
  --radius-full:    9999px;    /* pill — segmented controls, tags */

  /* ----------------------------------------------------------
     ELEVATION — Shadows
  ---------------------------------------------------------- */
  --shadow-card:    0px 4px 20px rgba(0, 0, 0, 0.03);   /* Level 1 cards */
  --shadow-overlay: 0px 10px 30px rgba(0, 0, 0, 0.08);  /* Level 2 overlays */

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */
  --layout-columns-desktop: 12;
  --layout-container-max:   1280px;
  --layout-card-safe-area:  var(--space-md);  /* min 24px card padding */
}