/* ============================================================
   Creative Source — Color tokens
   Built from the brand mark (orange + ink) and the graffiti
   mural: a vibrant street-art accent set over a near-black base.
   ============================================================ */

:root {
  /* ---- Brand core ---------------------------------------- */
  --cs-orange:        #F2920A;  /* primary — the "#" orange   */
  --cs-orange-bright: #FF9E1B;
  --cs-orange-deep:   #D67B00;
  --cs-orange-ink:    #7A4A02;  /* orange text on light       */
  --cs-ink:           #030406;  /* brand black                */
  --cs-white:         #FFFFFF;

  /* ---- Neutral scale (cool near-black → paper) ----------- */
  --cs-neutral-950: #050608;
  --cs-neutral-900: #0D0F13;
  --cs-neutral-850: #15181E;
  --cs-neutral-800: #1D2128;
  --cs-neutral-700: #2C313B;
  --cs-neutral-600: #434A57;
  --cs-neutral-500: #5E6776;
  --cs-neutral-400: #828B9B;
  --cs-neutral-300: #A9B1BE;
  --cs-neutral-200: #CFD4DC;
  --cs-neutral-100: #E7EAEF;
  --cs-neutral-50:  #F4F5F8;
  --cs-paper:       #FBFBFC;

  /* ---- Graffiti accents (from the mural) ----------------- */
  --cs-yellow:  #FFC91E;
  --cs-coral:   #FF4C2D;
  --cs-pink:    #FF5DA2;
  --cs-sky:     #1DC6FF;
  --cs-blue:    #0C8CFA;
  --cs-violet:  #8B7DFF;
  --cs-green:   #18C28A;

  /* ---- Semantic ------------------------------------------ */
  --cs-success: #18C28A;
  --cs-warning: #FFC91E;
  --cs-danger:  #FF4C2D;
  --cs-info:    #1DC6FF;

  /* ============================================================
     Semantic aliases — DARK is the home surface for the brand.
     ============================================================ */

  /* Surfaces */
  --surface-base:    var(--cs-ink);
  --surface-raised:  var(--cs-neutral-900);
  --surface-card:    var(--cs-neutral-850);
  --surface-inset:   var(--cs-neutral-950);
  --surface-overlay: rgba(3, 4, 6, 0.72);

  /* Text */
  --text-primary:    #F4F5F8;
  --text-secondary:  #A9B1BE;
  --text-muted:      #5E6776;
  --text-on-orange:  #1A0E00;
  --text-on-light:   #15181E;
  --text-accent:     var(--cs-orange);

  /* Lines & borders */
  --border-subtle:   rgba(255, 255, 255, 0.08);
  --border-default:  rgba(255, 255, 255, 0.14);
  --border-strong:   rgba(255, 255, 255, 0.26);
  --border-orange:   var(--cs-orange);

  /* Interactive */
  --action-primary:        var(--cs-orange);
  --action-primary-hover:  var(--cs-orange-bright);
  --action-primary-press:  var(--cs-orange-deep);
  --focus-ring:            var(--cs-orange);
}

/* ------------------------------------------------------------
   Light theme scope — apply .cs-light on any container that
   should flip to paper. The brand still leads with dark.
   ------------------------------------------------------------ */
.cs-light {
  --surface-base:    var(--cs-paper);
  --surface-raised:  var(--cs-white);
  --surface-card:    var(--cs-white);
  --surface-inset:   var(--cs-neutral-50);
  --surface-overlay: rgba(255, 255, 255, 0.72);

  --text-primary:    var(--cs-neutral-900);
  --text-secondary:  var(--cs-neutral-600);
  --text-muted:      var(--cs-neutral-400);
  --text-on-light:   var(--cs-neutral-900);

  --border-subtle:   rgba(3, 4, 6, 0.07);
  --border-default:  rgba(3, 4, 6, 0.12);
  --border-strong:   rgba(3, 4, 6, 0.22);
}