/* ============================================================
   ControlSolar — COLOR TOKENS
   Concept: "controlar la luz" — warm light vs deep shade.
   Amber is the ONLY accent and is used with avarice (CTAs only).
   ============================================================ */
:root {
  /* --- Brand core --- */
  --cs-canvas:        #F6F3EE; /* warm off-white — the default page ground */
  --cs-ink:           #161413; /* near-black ink — primary text */
  --cs-amber:         #FF9E2C; /* solar amber — single accent, CTAs only */
  --cs-teal:          #0F3D3E; /* deep teal-green — contrast / shade sections */

  /* --- Amber ramp (for hovers/press of the accent ONLY) --- */
  --cs-amber-700:     #E07F12; /* press */
  --cs-amber-600:     #F58E1E; /* hover */
  --cs-amber-500:     #FF9E2C; /* base = --cs-amber */
  --cs-amber-200:     #FFD8A1; /* tints, focus ring fill */
  --cs-amber-100:     #FFEAD0; /* soft amber wash */
  --cs-amber-050:     #FFF6EA; /* faintest wash */

  /* --- Teal ramp (shade surfaces & teal text) --- */
  --cs-teal-900:      #0A2B2C;
  --cs-teal-700:      #0F3D3E; /* base = --cs-teal */
  --cs-teal-500:      #1C5C5D;
  --cs-teal-300:      #4E8485;
  --cs-teal-100:      #D7E4E2; /* teal wash on canvas */
  --cs-teal-050:      #ECF2F0;

  /* --- Warm neutral ramp (off-white family, warm grey) --- */
  --cs-neutral-000:   #FFFFFF; /* pure white card surface */
  --cs-neutral-050:   #FBF9F5;
  --cs-neutral-100:   #F6F3EE; /* = canvas */
  --cs-neutral-200:   #ECE7DE; /* hairline / divider */
  --cs-neutral-300:   #DAD3C7; /* borders */
  --cs-neutral-400:   #B7AE9F; /* disabled fg, faint icon */
  --cs-neutral-500:   #8C8475; /* muted text */
  --cs-neutral-700:   #4A453D; /* secondary text */
  --cs-neutral-900:   #161413; /* = ink */

  /* --- Semantic status --- */
  --cs-success:       #1E7A52;
  --cs-success-wash:  #E3F1E9;
  --cs-warning:       #C9810A;
  --cs-warning-wash:  #FBEFD6;
  --cs-danger:        #B23A2E;
  --cs-danger-wash:   #F7E4E1;
  --cs-info:          #1C5C5D;
  --cs-info-wash:     #ECF2F0;

  /* ===========================================================
     SEMANTIC ALIASES — reference these in components, not raw hex
     =========================================================== */
  --surface-page:        var(--cs-canvas);
  --surface-card:        var(--cs-neutral-000);
  --surface-raised:      var(--cs-neutral-050);
  --surface-sunken:      var(--cs-neutral-100);
  --surface-shade:       var(--cs-teal-700);  /* dark/teal sections */
  --surface-shade-deep:  var(--cs-teal-900);
  --surface-amber-wash:  var(--cs-amber-050);

  --text-strong:         var(--cs-ink);
  --text-body:           var(--cs-neutral-700);
  --text-muted:          var(--cs-neutral-500);
  --text-on-shade:       #F3F1EC;        /* text over teal */
  --text-on-shade-muted: #A8C0BE;
  --text-on-amber:       var(--cs-ink);  /* ink reads best on amber */
  --text-link:           var(--cs-teal-700);

  --accent:              var(--cs-amber-500);
  --accent-hover:        var(--cs-amber-600);
  --accent-press:        var(--cs-amber-700);

  --border-hairline:     var(--cs-neutral-200);
  --border-default:      var(--cs-neutral-300);
  --border-strong:       var(--cs-neutral-400);
  --border-focus:        var(--cs-amber-500);

  --ring-focus:          0 0 0 3px var(--cs-amber-200);
  --ring-focus-teal:     0 0 0 3px var(--cs-teal-100);
}