/* ============================================================
   tokens.css — Design Token System

   Layer 1: Primitive tokens  — raw values, no semantic meaning
   Layer 2: Semantic tokens   — reference primitives, context-aware
                                 Desktop default (≥ 768px)
   Layer 3: Mobile overrides  — applied at < 768px

   Naming convention mirrors Figma variable paths,
   with "/" replaced by "-" for valid CSS ident syntax.
   ============================================================ */


/* ============================================================
   LAYER 1 — PRIMITIVES
   ============================================================ */

:root {

  /* --- Neutral --- */
  --color-neutral-0:   #ffffff;
  --color-neutral-900: #000000;


  /* --- Skin --- */
  --color-skin-200: #dfaa98;
  --color-skin-400: #bc8b7e;
  --color-skin-700: #8a5e43;


  /* --- Clay --- */
  --color-clay-100: #f0e9e1;
  --color-clay-300: #baa49a;
  --color-clay-500: #FFE9E9;  /* terracotta / hero bg tone */
  --color-clay-510: #FDDEDE;  /* hero layer 1 — front, slightly deeper */
  --color-clay-505: #FEE1E3;  /* hero layer 2 — middle */
  --color-clay-502: #FFE4E6;  /* hero layer 3 — back, barely darker */


  /* --- Glaze / Ember --- */
  --color-glaze-ember-600: #d03535;


  /* --- Glaze / Sun --- */
  --color-glaze-sun-200: #f3f794;
  --color-glaze-sun-500: #ffbe32;


  /* --- Glaze / Leaf --- */
  --color-glaze-leaf-200: #d4ff9c;
  --color-glaze-leaf-400: #9cb878;
  --color-glaze-leaf-500: #8cd4a7;
  --color-glaze-leaf-600: #259850;


  /* --- Glaze / Sky --- */
  --color-glaze-sky-400: #55b9e0;
  --color-glaze-sky-700: #1b4496;


  /* --- Glaze / Petal --- */
  --color-glaze-petal-200: #ffd6e4;
  --color-glaze-petal-300: #cebff6;


  /* --- Spacing scale (4 px base: space-N = N × 4 px)
     ------------------------------------------------------ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-11: 44px;
  --space-20: 80px;
  --space-25: 100px;
  --space-30: 120px;
  --space-40: 160px;


  /* --- Font-family scale
     ------------------------------------------------------ */
  --font-family-display: "alphabet-soup-pro";
  --font-family-body:    "ff-avance-pro";
  --font-family-nav:     "aktiv-grotesk";


  /* --- Font-weight scale
     ------------------------------------------------------ */
  --font-weight-regular:  400;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;


  /* --- Font-size scale
     ------------------------------------------------------ */
  --font-size-0:  14px;
  --font-size-1:  16px;
  --font-size-2:  18px;
  --font-size-3:  20px;
  --font-size-4:  24px;
  --font-size-5:  36px;
  --font-size-6:  40px;
  --font-size-7:  48px;
  --font-size-8:  64px;
  --font-size-9:  96px;


  /* --- Border-radius scale
     ------------------------------------------------------ */
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:   16px;
  --radius-xl:   32px;
  --radius-2xl:  64px;
  --radius-full: 9999px;
}


/* ============================================================
   LAYER 2 — SEMANTIC TOKENS  (desktop default: ≥ 768px)
   ============================================================ */

:root {

  /* --- Surface colors -------------------------------------- */
  --color-surface-page:  var(--color-neutral-0);
  --color-surface-deep:  var(--color-clay-300);
  --color-surface-warm:  var(--color-clay-100);
  --color-surface-bold:  var(--color-clay-500);


  /* --- Text colors ----------------------------------------- */
  --color-text-default:    var(--color-neutral-900);
  --color-text-inverse:    var(--color-neutral-0);
  --color-text-highlight:  var(--color-glaze-sun-200);
  --color-text-link:       var(--color-skin-700);
  --color-text-link-hover: var(--color-glaze-sky-700);


  /* --- Muted text scale — for secondary info, hints, fine print */
  --color-text-muted:    rgba(0, 0, 0, 0.55);  /* primary muted — field labels, "Hosted by" role */
  --color-text-subtle:   rgba(0, 0, 0, 0.40);  /* secondary muted — cancellation line, "Booking fees" */
  --color-text-faint:    rgba(0, 0, 0, 0.25);  /* tertiary muted — trust row, step separators */


  /* --- Success state — for confirmation screens, positive feedback */
  --color-text-success:            var(--color-glaze-leaf-600);       /* #259850 */
  --color-surface-success:         var(--color-glaze-leaf-200);       /* #d4ff9c */
  --color-surface-success-subtle:  rgba(156, 184, 120, 0.10);         /* leaf-400 at 10% */


  /* --- Subtle surfaces — for info panels and filled inputs */
  --color-surface-subtle:  rgba(0, 0, 0, 0.025);  /* barely-visible fill (price panel, host card) */
  --color-surface-muted:   rgba(0, 0, 0, 0.04);   /* gentle fill (inputs default) */


  /* --- Subtle borders — for dividers and input outlines */
  --color-border-subtle:   rgba(0, 0, 0, 0.08);   /* dividers, step-indicator underline */
  --color-border-default:  rgba(0, 0, 0, 0.10);   /* input outlines, card fields */


  /* --- Action colors --------------------------------------- */
  --color-action-border:          var(--color-neutral-900);

  --color-action-primary-bg:      var(--color-neutral-900);
  --color-action-primary-label:   var(--color-neutral-0);

  --color-action-secondary-bg:    var(--color-clay-100);
  --color-action-secondary-label: var(--color-skin-700);

  --color-action-accent-bg:       var(--color-glaze-ember-600);
  --color-action-accent-label:    var(--color-neutral-0);


  /* --- Typography — desktop / ≥ 768px ----------------------
     type-size-h3 desktop was updated from font-size-5 (36px) → font-size-4 (24px).
     Affects: Body/Lead, EventCard MetaArea, PriceInfo,
     AvailabilityIndicator status, StepCard body.
     --------------------------------------------------------- */

  /* Family */
  --type-family-display:  var(--font-family-display);  /* "alphabet-soup-pro" (Alphabet Soup) */
  --type-family-body:     var(--font-family-body);     /* "ff-avance-pro" (Avance Pro)        */
  --type-family-nav:      var(--font-family-nav);      /* "aktiv-grotesk" */

  /* Weight */
  --type-weight-regular:  var(--font-weight-regular);  /* 400 */
  --type-weight-semibold: var(--font-weight-semibold); /* 600 */
  --type-weight-bold:     var(--font-weight-bold);     /* 700 */

  /* Size — desktop */
  --type-size-display:  var(--font-size-9);  /*  96px */
  --type-size-h1:       var(--font-size-8);  /*  64px */
  --type-size-h2:       var(--font-size-6);  /*  40px */
  --type-size-h3:       var(--font-size-4);  /*  24px */
  --type-size-h4:       var(--font-size-5);  /*  36px */
  --type-size-h5:       var(--font-size-4);  /*  24px */
  --type-size-body-lg:  var(--font-size-4);  /*  24px */
  --type-size-body-md:  var(--font-size-3);  /*  20px */
  --type-size-body:     var(--font-size-1);  /*  16px */
  --type-size-caption:  var(--font-size-1);  /*  16px */


  /* --- Spacing — component  (desktop) ---------------------- */
  --space-component-xs:   var(--space-1);   /*   4px */
  --space-component-sm:   var(--space-2);   /*   8px */
  --space-component-md:   var(--space-4);   /*  16px */
  --space-component-lg:   var(--space-6);   /*  24px */
  --space-component-xl:   var(--space-11);  /*  44px */
  --space-component-2xl:  var(--space-20);  /*  80px */
  --space-component-3xl:  var(--space-25);  /* 100px */
  --space-component-4xl:  var(--space-30);  /* 120px */
  --space-component-5xl:  var(--space-40);  /* 160px */


  /* --- Spacing — layout  (desktop) ------------------------- */
  --space-layout-md:   var(--space-5);   /*  20px */
  --space-layout-lg:   var(--space-11);  /*  44px */
  --space-layout-xl:   var(--space-20);  /*  80px */
  --space-layout-2xl:  var(--space-25);  /* 100px */
  --space-layout-3xl:  var(--space-30);  /* 120px */
  --space-layout-4xl:  var(--space-40);  /* 160px */


  /* --- Border radius --------------------------------------- */
  --radius-button:    var(--radius-md);   /*  8px */
  --radius-card:      var(--radius-lg);   /* 16px */
  --radius-card-lg:   var(--radius-lg);   /* 16px */
  --radius-card-xl:   var(--radius-xl);   /* 32px */
  --radius-card-2xl:  var(--radius-2xl);  /* 64px */


  /* --- Shadows -------------------------------------------- */
  /*
    --shadow-tile: drop shadow for large PNG tile images
    (hero hand tiles, UpcomingEvents banner, etc.)
    Single source — tune here to adjust across all usages.

    --shadow-card: drop shadow for card components
    (TestimonialCard, EventCard, etc.)
    Half the offset/blur of --shadow-tile — lighter touch for smaller elements.
  */
  --shadow-tile: 0px 7px 7px rgba(0, 0, 0, 0.25);
  --shadow-card: 0px 6px 6px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0px 3px 3px rgba(0, 0, 0, 0.25);  /* compressed on press/hover */
  --shadow-divider: 0px 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-photo: -1px 1px 1px rgba(0, 0, 0, 0.3);
}


/* ============================================================
   LAYER 3 — MOBILE OVERRIDES  (< 768px)
   Only tokens whose values differ from desktop mode.

   Per CLAUDE.md: tablet (≥ 768px) uses desktop token values.
   Mobile-only means strictly < 768px.
   ============================================================ */

@media (max-width: 767px) {
  :root {

    --type-size-display:  var(--font-size-6);  /*  40px  (was 96px) */
    --type-size-h1:       var(--font-size-4);  /*  24px  (was 64px) */
    --type-size-h2:       var(--font-size-4);  /*  24px  (was 40px) */
    --type-size-h3:       var(--font-size-3);  /*  20px  (was 24px) */
    --type-size-h4:       var(--font-size-4);  /*  24px  (was 36px) */
    --type-size-h5:       var(--font-size-3);  /*  20px  (was 24px) */
    --type-size-body-lg:  var(--font-size-2);  /*  18px  (was 24px) */
    --type-size-body-md:  var(--font-size-1);  /*  16px  (was 20px) */
    --type-size-caption:  var(--font-size-0);  /*  14px  (was 16px) */


    /* Spacing — component */
    --space-component-md:   var(--space-3);   /*  12px  (was  16px) */
    --space-component-xl:   var(--space-6);   /*  24px  (was  44px) */
    --space-component-2xl:  var(--space-11);  /*  44px  (was  80px) */
    --space-component-3xl:  var(--space-20);  /*  80px  (was 100px) */
    --space-component-4xl:  var(--space-25);  /* 100px  (was 120px) */
    --space-component-5xl:  var(--space-30);  /* 120px  (was 160px) */


    /* Spacing — layout */
    --space-layout-xl:   var(--space-11);  /*  44px  (was  80px) */
    --space-layout-2xl:  var(--space-11);  /*  44px  (was 100px) */
    --space-layout-3xl:  var(--space-25);  /* 100px  (was 120px) */
    --space-layout-4xl:  var(--space-30);  /* 120px  (was 160px) */
  }
}