/* ============================================================
   PARKNHA — COLOR TOKENS
   Palette straight from the brand guidelines (2 primary, 3 secondary).
   Base scales are tints/shades derived from the brand hues for UI depth.
   ============================================================ */

:root {
  /* --- Brand core (verbatim from guidelines) --- */
  --teal:        #2A7373; /* primary — logo, text, structure */
  --orange:      #DC5F2C; /* primary — energy, CTAs, the squiggle/dot */
  --mint:        #B5D7BA; /* secondary — soft surfaces, backgrounds */
  --yellow:      #F7DD76; /* secondary — the car, highlights, accents */
  --white:       #FFFFFF; /* secondary */

  /* --- Teal scale (cool, structural) --- */
  --teal-900: #0F3838;
  --teal-800: #1C5454;
  --teal-700: #2A7373; /* = --teal */
  --teal-600: #3C8C8C;
  --teal-500: #57A3A3;
  --teal-400: #7DBABA;
  --teal-300: #A8D2D2;
  --teal-200: #D0E7E7;
  --teal-100: #ECF5F5;

  /* --- Orange scale (warm, active) --- */
  --orange-700: #B84A1E;
  --orange-600: #DC5F2C; /* = --orange */
  --orange-500: #E8794A;
  --orange-400: #F09973;
  --orange-300: #F6BBA0;
  --orange-200: #FBDDD0;
  --orange-100: #FDEDE6;

  /* --- Mint scale --- */
  --mint-500: #8FC4A0;
  --mint-400: #B5D7BA; /* = --mint */
  --mint-300: #CBE3CE;
  --mint-200: #E0EFE2;
  --mint-100: #F0F7F1;

  /* --- Yellow scale --- */
  --yellow-500: #F2CE45;
  --yellow-400: #F7DD76; /* = --yellow */
  --yellow-300: #FAE9A1;
  --yellow-200: #FDF3C9;
  --yellow-100: #FEFAE9;

  /* --- Neutrals (warm-tinted greys, not pure black) --- */
  --ink-900: #1E2A2A; /* near-black with a teal undertone — headings on light */
  --ink-700: #3D4D4D;
  --ink-500: #6B7C7C;
  --ink-300: #A6B4B4;
  --ink-200: #D5DEDE;
  --ink-100: #EDF2F2;
  --paper:   #FBFCFB; /* off-white app canvas */

  /* ============================================================
     SEMANTIC ALIASES — reference these in product code
     ============================================================ */

  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--teal-800);
  --text-muted:    var(--ink-500);
  --text-on-teal:  var(--white);
  --text-on-orange:var(--white);
  --text-link:     var(--orange-600);

  /* Surfaces */
  --surface-app:    var(--paper);
  --surface-card:   var(--white);
  --surface-sunken: var(--mint-100);
  --surface-mint:   var(--mint-400);
  --surface-teal:   var(--teal-700);
  --surface-teal-deep: var(--teal-900);

  /* Brand / action */
  --brand-primary:    var(--teal-700);
  --brand-accent:     var(--orange-600);
  --action-bg:        var(--orange-600);
  --action-bg-hover:  var(--orange-700);
  --action-fg:        var(--white);
  --action-secondary-bg:    var(--teal-700);
  --action-secondary-hover: var(--teal-800);

  /* Borders & lines */
  --border-subtle:  var(--ink-200);
  --border-default: var(--teal-300);
  --border-strong:  var(--teal-700);
  --ring-focus:     var(--orange-500);

  /* Feedback */
  --success:  #2A7373;   /* brand teal doubles as success */
  --success-bg: var(--mint-200);
  --warning:  #E6A200;
  --warning-bg: var(--yellow-200);
  --danger:   #C73E1D;
  --danger-bg: var(--orange-100);
  --info:     var(--teal-600);
  --info-bg:  var(--teal-100);
}