/* Paralax — Color tokens
 * Brand palette sampled from the Paralax logo (teal / orange / blue / amber),
 * which sit in the Material 700 range. Full tint/shade scales below,
 * then semantic aliases used across the system. */

:root {
  /* ---- Teal (primary — the "P") ---- */
  --teal-50:  #E0F2F1;
  --teal-100: #B2DFDB;
  --teal-200: #80CBC4;
  --teal-300: #4DB6AC;
  --teal-400: #26A69A;
  --teal-500: #009688;
  --teal-600: #00897B;
  --teal-700: #00796B; /* brand anchor */
  --teal-800: #00695C;
  --teal-900: #004D40;

  /* ---- Orange (accent — the "R", tagline) ---- */
  --orange-50:  #FFF3E0;
  --orange-100: #FFE0B2;
  --orange-200: #FFCC80;
  --orange-300: #FFB74D;
  --orange-400: #FFA726;
  --orange-500: #FF9800;
  --orange-600: #FB8C00;
  --orange-700: #F57C00; /* brand */
  --orange-800: #EF6C00;
  --orange-900: #E65100;

  /* ---- Blue (the "X") ---- */
  --blue-50:  #E1F5FE;
  --blue-100: #B3E5FC;
  --blue-200: #81D4FA;
  --blue-300: #4FC3F7;
  --blue-400: #29B6F6;
  --blue-500: #03A9F4;
  --blue-600: #039BE5;
  --blue-700: #0288D1; /* brand */
  --blue-800: #0277BD;
  --blue-900: #01579B;

  /* ---- Amber (the "L") ---- */
  --amber-50:  #FFF8E1;
  --amber-100: #FFECB3;
  --amber-200: #FFE082;
  --amber-300: #FFD54F;
  --amber-400: #FFCB28; /* brand — exact logo value */
  --amber-500: #FFC107;
  --amber-600: #FFB300;
  --amber-700: #FFA000;
  --amber-800: #FF8F00;
  --amber-900: #FF6F00;

  /* ---- Neutrals (cool gray, ink anchored on logo #333) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F8FAFB;
  --neutral-100: #EEF1F4;
  --neutral-200: #DDE3E8;
  --neutral-300: #C4CDD5;
  --neutral-400: #9AA7B2;
  --neutral-500: #6B7A8A;
  --neutral-600: #4E5A66;
  --neutral-700: #3A434D;
  --neutral-800: #262C33;
  --neutral-900: #14181C;
  --ink:         #333333; /* logo wordmark */

  /* ---- Functional / status ---- */
  --red-50:  #FDECEC;
  --red-100: #F9C9C9;
  --red-500: #E53935;
  --red-600: #D32F2F;
  --red-700: #C62828;
  --green-50:  #E8F5E9;
  --green-500: #43A047;
  --green-600: #2E7D32;

  /* =========================================================
     Semantic aliases — prefer these in components & UI kits
     ========================================================= */

  /* Brand */
  --color-primary:        var(--teal-700);
  --color-primary-hover:  var(--teal-800);
  --color-primary-active: var(--teal-900);
  --color-primary-soft:   var(--teal-50);
  --color-primary-border: var(--teal-100);
  --color-on-primary:     #FFFFFF;

  --color-accent:         var(--orange-700);
  --color-accent-hover:   var(--orange-800);
  --color-accent-soft:    var(--orange-50);
  --color-on-accent:      #FFFFFF;

  --color-info:           var(--blue-700);
  --color-info-soft:      var(--blue-50);
  --color-highlight:      var(--amber-400);
  --color-highlight-soft: var(--amber-50);

  /* Status */
  --color-success:        var(--green-600);
  --color-success-soft:   var(--green-50);
  --color-warning:        var(--amber-700);
  --color-warning-soft:   var(--amber-50);
  --color-danger:         var(--red-600);
  --color-danger-soft:    var(--red-50);

  /* Text */
  --text-strong:   var(--ink);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-subtle:   var(--neutral-400);
  --text-inverse:  #FFFFFF;
  --text-link:     var(--teal-700);
  --text-link-hover: var(--teal-800);

  /* Surfaces */
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-raised:  var(--neutral-0);
  --surface-inverse: var(--neutral-900);

  /* Borders & dividers */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --divider:        var(--neutral-200);

  /* Focus ring */
  --ring: color-mix(in srgb, var(--teal-700) 45%, transparent);
}