/* KSSK colour system.
   CORE: the three brand colours + two accents, taken verbatim from
   KSSK_Brand.pdf (Brand Guidelines 2026 v1.01, section 03 Colors).
   SCALES: the brand book states each core colour is expanded into a tonal
   scale but publishes no hex values, so the ladders below are DERIVED - a
   lightness ramp on each core colour's own hue/saturation. See readme.md. */

:root {
  /* Core brand */
  --kssk-orange: #F57202;        /* Primary - "KSSK Orange", hsl(28 98% 48%) */
  --kssk-navy: #262932;          /* Secondary - "Deep Navy", hsl(225 14% 17%) */
  --kssk-cream: #F6F7EB;         /* Accent - "Warm Off-White", hsl(65 43% 95%) */
  --kssk-red: #CC3733;           /* Accent */
  --kssk-green: #3A5A40;         /* Accent */

  /* As-built values observed in the approved Figma mockup. The mockup was
     drawn before the palette was finalised; keep for pixel-faithful recreation. */
  --kssk-orange-mockup: #EC8305;
  --kssk-orange-asset: #F57200;  /* the fill baked into assets/logo/horizontal-outline.svg */
  --kssk-orange-vivid: #FF6900;
  --kssk-orange-accent: #FF8D28;

  /* Orange scale (derived) */
  --orange-50:  hsl(28 98% 96%);
  --orange-100: hsl(28 98% 91%);
  --orange-200: hsl(28 98% 82%);
  --orange-300: hsl(28 98% 71%);
  --orange-400: hsl(28 98% 60%);
  --orange-500: #F57202;
  --orange-600: hsl(28 98% 41%);
  --orange-700: hsl(28 96% 33%);
  --orange-800: hsl(28 92% 26%);
  --orange-900: hsl(28 88% 18%);

  /* Navy scale (derived) */
  --navy-50:  hsl(225 14% 96%);
  --navy-100: hsl(225 14% 90%);
  --navy-200: hsl(225 14% 80%);
  --navy-300: hsl(225 14% 66%);
  --navy-400: hsl(225 14% 50%);
  --navy-500: hsl(225 14% 36%);
  --navy-600: hsl(225 14% 28%);
  --navy-700: hsl(225 14% 22%);
  --navy-800: #262932;
  --navy-900: hsl(225 14% 11%);

  /* Cream scale (derived) */
  --cream-50:  hsl(65 43% 98%);
  --cream-100: #F6F7EB;
  --cream-200: hsl(65 30% 89%);
  --cream-300: hsl(65 22% 80%);

  /* Accent scales (derived) */
  --red-100: hsl(2 60% 94%);
  --red-500: #CC3733;
  --red-700: hsl(2 60% 36%);
  --green-100: hsl(131 22% 92%);
  --green-500: #3A5A40;
  --green-700: hsl(131 22% 20%);

  /* Neutrals - exact values read out of the Figma mockup */
  --neutral-0: #FFFFFF;
  --neutral-25: #FEFEFE;   /* car-card surface */
  --neutral-50: #FCFCFC;   /* booking-panel surface */
  --neutral-100: #F5F5F5;  /* input / summary-panel fill */
  --neutral-200: #D9D9D9;
  --neutral-300: #CCCCCC;
  --neutral-400: #848484;
  --neutral-500: #757575;  /* placeholder text */
  --neutral-600: #555555;
  --neutral-650: #525252;
  --neutral-700: #2F2F2F;
  --neutral-800: #171717;
  --neutral-900: #141414;

  /* Semantic - surfaces */
  --surface-page: var(--neutral-0);
  --surface-card: var(--neutral-25);
  --surface-panel: var(--neutral-50);
  --surface-subtle: var(--neutral-100);
  --surface-input: var(--neutral-100);
  --surface-dark: var(--kssk-navy);
  --surface-brand: var(--kssk-orange);
  --surface-cream: rgb(251 230 205);          /* orange @ 20% over white - the mockup's warm band */
  --surface-cream-raw: rgb(236 131 5 / 0.2);  /* the raw fill, for use over any backdrop */
  --surface-glass: rgb(0 0 0 / 0.125);        /* hero stat capsule, pairs with --blur-glass */

  /* Semantic - text */
  --text-primary: var(--neutral-800);
  --text-body: var(--kssk-navy);
  --text-secondary: var(--neutral-650);
  --text-muted: var(--neutral-500);
  --text-inverse: var(--neutral-0);
  --text-brand: var(--kssk-orange);
  --text-link: #261FB3;      /* "READ MORE" link, as-built */
  --text-on-brand: var(--neutral-0);

  /* Semantic - borders */
  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-brand: var(--kssk-orange);

  /* Semantic - status */
  --status-success: #12DA37;
  --status-success-surface: rgb(18 218 55 / 0.14);
  --status-danger: #FF0000;
  --status-danger-surface: #FFE7E7;
  --status-pending: var(--kssk-orange);
  --status-pending-surface: var(--surface-cream);

  /* Brand gradients - brand book section 03 */
  --gradient-dynamic: linear-gradient(135deg, #F57202 0%, #CC3733 100%); /* @kind other */
  --gradient-warm: linear-gradient(135deg, #F57202 0%, #F6F7EB 100%); /* @kind other */
  --gradient-calm: linear-gradient(135deg, #3A5A40 0%, #F6F7EB 100%); /* @kind other */

  /* Third-party channel colour, sampled from the source's own chat button
     bitmap (assets/whatsapp-chat-pill.png) rather than taken from the
     platform's published brand green. It sits outside the KSSK palette and is
     used only on the floating chat control. */
  --channel-whatsapp: #4CD25F;
}