/* ============================================================
   TOOSMART — COLOR TOKENS
   Brand: vivid CTV red on cool silver/graphite neutrals.
   Sampled from the Toosmart "CTV Advertising" wordmark.
   ============================================================ */

:root {
  /* --- Brand red scale (primary) --- */
  --red-50:  #FFF0F0;
  --red-100: #FFD9DB;
  --red-200: #FFB3B6;
  --red-300: #FF7E83;
  --red-400: #FF4B50;   /* gradient highlight */
  --red-500: #E51E25;   /* PRIMARY brand red */
  --red-600: #C20710;   /* gradient shadow */
  --red-700: #9C060D;
  --red-800: #74060B;
  --red-900: #4D0608;

  /* --- Cool graphite / silver neutrals --- */
  --gray-0:   #FFFFFF;
  --gray-25:  #FAFAFB;
  --gray-50:  #F4F4F6;
  --gray-100: #EAEAEE;
  --gray-200: #D7D8DE;
  --gray-300: #B9BBC4;
  --gray-400: #8E909C;
  --gray-500: #686A77;
  --gray-600: #4A4C57;
  --gray-700: #33343D;
  --gray-800: #1F2027;
  --gray-900: #131318;
  --gray-950: #0B0B0E;   /* near-black media surface */
  --black:    #050507;

  /* --- Semantic status --- */
  --green-500:  #18B27A;
  --green-600:  #0E8E60;
  --amber-500:  #F5A524;
  --amber-600:  #CC8211;
  --blue-500:   #2E8FF0;
  --blue-600:   #1F6FC4;

  /* ============================================================
     SIGNATURE GRADIENTS
     ============================================================ */
  --grad-red:      linear-gradient(168deg, #FF4B50 0%, #E51E25 46%, #C20710 100%); /* @kind color */
  --grad-red-soft: linear-gradient(168deg, #FF6A6E 0%, #E51E25 100%); /* @kind color */
  --grad-silver:   linear-gradient(180deg, #FDFDFE 0%, #D2D4DB 52%, #9A9CA8 100%); /* @kind color */
  --grad-graphite: linear-gradient(180deg, #1F2027 0%, #0B0B0E 100%); /* @kind color */
  /* radial glow used behind hero / player surfaces */
  --glow-red:      radial-gradient(60% 80% at 50% 0%, rgba(229,30,37,0.28) 0%, rgba(229,30,37,0) 70%); /* @kind color */

  /* ============================================================
     SEMANTIC ALIASES — light (default) surface
     ============================================================ */
  --brand:            var(--red-500);
  --brand-hover:      var(--red-600);
  --brand-active:     var(--red-700);
  --brand-contrast:   #FFFFFF;
  --brand-subtle:     var(--red-50);
  --brand-ring:       rgba(229, 30, 37, 0.35);

  --bg-page:          var(--gray-50);
  --bg-canvas:        var(--gray-25);
  --surface-card:     var(--gray-0);
  --surface-raised:   var(--gray-0);
  --surface-sunken:   var(--gray-50);
  --surface-inverse:  var(--gray-950);

  --text-strong:      var(--gray-900);
  --text-body:        var(--gray-700);
  --text-muted:       var(--gray-500);
  --text-faint:       var(--gray-400);
  --text-on-brand:    #FFFFFF;
  --text-inverse:     var(--gray-50);

  --border-subtle:    var(--gray-100);
  --border-default:   var(--gray-200);
  --border-strong:    var(--gray-300);
  --border-brand:     var(--red-500);

  --status-success:   var(--green-500);
  --status-success-bg:#E4F6EF;
  --status-warning:   var(--amber-500);
  --status-warning-bg:#FDF1DD;
  --status-info:      var(--blue-500);
  --status-info-bg:   #E4F0FC;
  --status-danger:    var(--red-500);
  --status-danger-bg: var(--red-50);
}

/* ============================================================
   DARK MEDIA SURFACE — the default for product dashboards,
   players and CTV-context UI. Apply via [data-theme="dark"]
   or .ts-dark on any container.
   ============================================================ */
[data-theme="dark"], .ts-dark {
  --bg-page:          var(--gray-950);
  --bg-canvas:        var(--black);
  --surface-card:     var(--gray-900);
  --surface-raised:   var(--gray-800);
  --surface-sunken:   var(--black);
  --surface-inverse:  var(--gray-0);

  --text-strong:      #F5F6F8;
  --text-body:        #C7C9D2;
  --text-muted:       #8E909C;
  --text-faint:       #5C5E6B;
  --text-inverse:     var(--gray-900);

  --border-subtle:    rgba(255,255,255,0.06);
  --border-default:   rgba(255,255,255,0.10);
  --border-strong:    rgba(255,255,255,0.18);

  --brand-subtle:     rgba(229,30,37,0.14);
  --status-success-bg:rgba(24,178,122,0.16);
  --status-warning-bg:rgba(245,165,36,0.16);
  --status-info-bg:   rgba(46,143,240,0.16);
  --status-danger-bg: rgba(229,30,37,0.16);
}