/* ============================================================
   KENOVA — Color tokens
   A warm, Adriatic-coastal palette: deep teal, sea teal,
   terracotta, and limestone. Inspired by Dubrovnik's stone,
   sea and terracotta rooftops.
   ============================================================ */
:root {
  /* --- Brand core (raw values) --- */
  --teal-900: #0C4A52;   /* deep teal — headers, logo, dark surfaces */
  --teal-600: #15808A;   /* sea teal — interactive elements, links */
  --terracotta-500: #C2603C; /* terracotta — CTAs only */
  --limestone-100: #EBE4D6;  /* limestone — page background */

  /* --- Extended ramp (derived, harmonious) --- */
  --teal-950: #08363C;   /* darkest teal — deep banners, footers */
  --teal-700: #11636B;   /* hover for interactive teal */
  --teal-500: #2A98A1;   /* lighter sea teal — accents, focus rings */
  --teal-100: #D6E6E6;   /* tint — selected/info surfaces */

  --terracotta-600: #A84E2E; /* terracotta hover/press (v1 --terracotta-dk) */
  --terracotta-300: #E0A187; /* terracotta tint */
  --terracotta-100: #F2E0D6; /* terracotta wash surface */

  --limestone-50:  #FBF8F1;  /* lightest stone — card surface (v1 --card) */
  --limestone-200: #D9D1C0;  /* limestone border / divider (v1 --line) */
  --limestone-300: #C9BCA1;  /* muted stone — disabled, hairlines */

  --sand-600: #8A7B5E;       /* warm taupe — secondary text on light */

  /* --- Neutrals (warm-tinted, not pure gray) --- */
  --ink-900: #18211F;    /* primary text on light (v1 --ink) */
  --ink-700: #344039;    /* strong body text */
  --ink-500: #5B635F;    /* secondary text (v1 --muted) */
  --ink-300: #94A0A0;    /* tertiary / placeholder */
  --white: #FFFFFF;

  /* --- Semantic feedback --- */
  --success: #2E7D5B; /* v1 --ok */
  --success-bg: #E2EFE5;
  --warning: #C98A2B;
  --warning-bg: #F6EBD4;
  --danger: #B4452F;
  --danger-bg: #F4E1DB;

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --surface-page: var(--limestone-100);
  --surface-card: var(--limestone-50);
  --surface-raised: var(--white);
  --surface-inverse: var(--teal-900);
  --surface-inverse-deep: var(--teal-950);
  --surface-info: var(--teal-100);
  --surface-cta-wash: var(--terracotta-100);

  --text-display: var(--teal-900);   /* serif headings */
  --text-heading: var(--teal-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-subtle: var(--ink-300);
  --text-on-inverse: var(--limestone-50);
  --text-on-inverse-muted: #9BBEC1;
  --text-link: var(--teal-600);
  --text-link-hover: var(--teal-700);

  --interactive: var(--teal-600);
  --interactive-hover: var(--teal-700);
  --interactive-press: var(--teal-900);

  --cta: var(--terracotta-500);
  --cta-hover: var(--terracotta-600);
  --cta-text: var(--white);

  --border-subtle: var(--limestone-200);
  --border-strong: var(--limestone-300);
  --border-interactive: var(--teal-600);
  --focus-ring: var(--teal-500);

  --label-color: var(--sand-600);   /* mono codes / section numbers */

  /* --- Signature gradients (from the live guide) --- */
  --gradient-hero: linear-gradient(165deg, #0E555E 0%, #0C4A52 55%, #093A41 100%); /* @kind other */
  --gradient-tour: linear-gradient(160deg, #C2603C 0%, #A84E2E 100%); /* @kind other */
  --skyline-roof: #093A41; /* skyline silhouette fill on hero */
}