/* ============================================================
   UPOLT — Color System
   "Powerful underneath. Simple on top."
   Accent (Progress Teal) is used intentionally and sparingly.
   ============================================================ */
:root {
  /* ---- Brand base palette ---- */
  --upolt-graphite: #17191D;   /* Deep Graphite — primary */
  --upolt-warm-white: #F5F5F3; /* Warm White — secondary  */
  --upolt-teal: #14B8A6;       /* Progress Teal — accent  */

  /* Graphite ramp (cool neutral, slightly warm) */
  --graphite-900: #17191D;
  --graphite-800: #25282E;
  --graphite-700: #353941;
  --graphite-600: #4A4F59;
  --graphite-500: #6B7280;
  --graphite-400: #9096A1;
  --graphite-300: #C2C6CD;
  --graphite-200: #DEE0E3;
  --graphite-100: #ECEDEF;
  --graphite-50:  #F5F5F3;

  /* Teal ramp (Progress Teal) */
  --teal-700: #0F8A7C;
  --teal-600: #119A8B;
  --teal-500: #14B8A6;
  --teal-400: #2DD4BF;
  --teal-300: #5EEAD4;
  --teal-100: #CCFBF1;
  --teal-50:  #ECFDF8;

  /* ---- Semantic status ---- */
  --color-success: #16A34A;
  --color-success-soft: #DCFCE7;
  --color-warning: #F59E0B;
  --color-warning-soft: #FEF3C7;
  --color-error:   #DC2626;
  --color-error-soft: #FEE2E2;
  --color-info:    #14B8A6;
  --color-info-soft: #CCFBF1;

  /* ---- Semantic surfaces ---- */
  --surface-page:   #F5F5F3;   /* Warm White app/marketing canvas */
  --surface-card:   #FFFFFF;   /* Cards always white              */
  --surface-raised: #FFFFFF;
  --surface-sunken: #ECEDEF;
  --surface-inverse: #17191D;  /* Dark sections / nav             */
  --surface-hover:  #ECEDEF;   /* Soft neutral hover highlight    */
  --surface-active: #DEE0E3;
  --surface-accent-soft: #ECFDF8;

  /* ---- Semantic text ---- */
  --text-primary:   #17191D;
  --text-secondary: #4A4F59;
  --text-tertiary:  #6B7280;
  --text-muted:     #9096A1;
  --text-on-accent: #FFFFFF;
  --text-on-inverse: #F5F5F3;
  --text-accent:    #0F8A7C;   /* teal text on light — darkened for AA */
  --text-link:      #0F8A7C;

  /* ---- Borders & lines ---- */
  --border-subtle: #ECEDEF;
  --border-default: #E7E7E5;
  --border-strong: #DEE0E3;
  --border-accent: #14B8A6;
  --border-inverse: #353941;

  /* ---- Accent semantic ---- */
  --accent: #14B8A6;
  --accent-hover: #119A8B;
  --accent-press: #0F8A7C;
  --accent-ring: rgba(20, 184, 166, 0.30);

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px rgba(20, 184, 166, 0.30);
}