/* ============================================================
   TRESIPUNT — COLOR TOKENS
   Primary: #F84015 (naranja corporativo)
   Secondary: #00A6B0 (teal)
   Text: #333333
   ============================================================ */
:root {
  /* ---- Brand: Orange (primary) ---- */
  --orange-50:  #FFF1ED;
  --orange-100: #FFDDD2;
  --orange-200: #FFBCA6;
  --orange-300: #FF9472;
  --orange-400: #FB6840;
  --orange-500: #F84015;  /* core brand */
  --orange-600: #DA3208;
  --orange-700: #B12706;
  --orange-800: #82200B;
  --orange-900: #5C1809;

  /* ---- Brand: Teal (secondary) ---- */
  --teal-50:  #E6F7F8;
  --teal-100: #C2ECEE;
  --teal-200: #8FDDE1;
  --teal-300: #54C9CF;
  --teal-400: #1FB3BB;
  --teal-500: #00A6B0;  /* core secondary */
  --teal-600: #008791;
  --teal-700: #006A72;
  --teal-800: #004F55;
  --teal-900: #03393E;

  /* ---- Neutrals (warm-leaning grey ramp anchored on #333) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FAFAFA;  /* slide / section alt background */
  --neutral-50:  #F4F4F5;
  --neutral-100: #ECECED;
  --neutral-200: #DDDDDF;
  --neutral-300: #C6C6C9;
  --neutral-400: #9A9A9E;
  --neutral-500: #6F6F73;
  --neutral-600: #545457;
  --neutral-700: #424244;
  --neutral-800: #333333;  /* core text */
  --neutral-900: #1E1E1F;

  /* ---- Semantic status ---- */
  --success-500: #1F9D57;
  --success-50:  #E7F6EE;
  --warning-500: #E8A317;
  --warning-50:  #FCF3DF;
  --danger-500:  #E23B2E;
  --danger-50:   #FCEAE8;
  --info-500:    #2D7FF9;
  --info-50:     #E8F1FE;

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */
  --color-primary:        var(--orange-500);
  --color-primary-hover:   var(--orange-600);
  --color-primary-press:   var(--orange-700);
  --color-primary-subtle:  var(--orange-50);
  --color-primary-border:  var(--orange-200);

  --color-secondary:       var(--teal-500);
  --color-secondary-hover: var(--teal-600);
  --color-secondary-press: var(--teal-700);
  --color-secondary-subtle:var(--teal-50);

  /* Text */
  --text-strong:   var(--neutral-900);
  --text-body:     var(--neutral-800);   /* #333 default */
  --text-muted:    var(--neutral-500);
  --text-subtle:   var(--neutral-400);
  --text-on-brand: var(--neutral-0);
  --text-link:     var(--orange-600);

  /* Surfaces */
  --surface-page:     var(--neutral-0);
  --surface-alt:      var(--neutral-25);
  --surface-card:     var(--neutral-0);
  --surface-sunken:   var(--neutral-50);
  --surface-inverse:  var(--neutral-900);
  --surface-brand:    var(--orange-500);
  --surface-brand-subtle: var(--orange-50);
  --surface-teal-subtle:  var(--teal-50);

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

  /* Focus ring */
  --focus-ring: color-mix(in srgb, var(--orange-500) 45%, transparent);
}