/* SignaCast design tokens — source of truth: TritonAgency/signacast.co brand/tokens.css
   Guideline: docs/BRAND.md. Consuming repos copy this file verbatim (see brand/README.md).
   Every token is a CSS custom property prefixed `--sc-`. Light values live on :root;
   the dark block (used by the Player chrome) swaps only the role tokens. */

:root {
  /* ---- brand colors (sampled from the logo) ---- */
  --sc-navy: #0A3272;        /* "Signa", the monitor */
  --sc-teal: #00B8AA;        /* "Cast", the play triangle, the signal arcs */
  --sc-teal-text: #007A74;   /* teal for running text on white (AA 5.2:1); #00918A only for ≥18.66px bold */

  /* ---- navy scale (600 = brand navy) ---- */
  --sc-navy-50:  #EEF3FB;
  --sc-navy-100: #D9E4F6;
  --sc-navy-200: #B4C8EC;
  --sc-navy-300: #85A5DC;
  --sc-navy-400: #4A7BC8;
  --sc-navy-500: #1D519F;
  --sc-navy-600: #0A3272;
  --sc-navy-700: #08295E;
  --sc-navy-800: #06204A;
  --sc-navy-900: #041736;
  --sc-navy-950: #020D20;

  /* ---- teal scale (500 = brand teal) ---- */
  --sc-teal-50:  #E3F8F5;
  --sc-teal-100: #C6F3EC;
  --sc-teal-200: #96E9DF;
  --sc-teal-300: #5EDBCD;
  --sc-teal-400: #22C9B8;
  --sc-teal-500: #00B8AA;
  --sc-teal-600: #00918A;
  --sc-teal-700: #007A74;
  --sc-teal-800: #045F5B;
  --sc-teal-900: #064744;
  --sc-teal-950: #032B29;

  /* ---- neutrals (slight blue bias, hue ≈ 217) ---- */
  --sc-gray-0:   #FFFFFF;
  --sc-gray-50:  #F7F9FC;
  --sc-gray-100: #EEF2F8;
  --sc-gray-200: #DDE4F0;
  --sc-gray-300: #C5D0E3;
  --sc-gray-400: #9AA7BE;
  --sc-gray-500: #7A879E;
  --sc-gray-600: #5C6B86;
  --sc-gray-700: #44536F;
  --sc-gray-800: #293751;
  --sc-gray-900: #0F1F3D;
  --sc-gray-950: #08132A;

  /* ---- semantic colors (text / strong = fills & icons / bg = tints) ---- */
  --sc-success:        #15803D;
  --sc-success-strong: #22A05B;
  --sc-success-bg:     #EAF8EF;
  --sc-warning:        #B45309;
  --sc-warning-strong: #F59E0B;
  --sc-warning-bg:     #FFF4E0;
  --sc-danger:         #C62828;
  --sc-danger-strong:  #E53935;
  --sc-danger-bg:      #FDECEC;
  --sc-info:           #1D519F;
  --sc-info-strong:    #4A7BC8;
  --sc-info-bg:        #EEF3FB;

  /* ---- role tokens (what components actually reference) ---- */
  --sc-bg:             var(--sc-gray-0);      /* page */
  --sc-bg-2:           #F3F6FB;               /* alternating sections, app canvas */
  --sc-surface:        var(--sc-gray-0);      /* cards, panels, inputs */
  --sc-surface-2:      var(--sc-gray-50);     /* hover rows, table heads */
  --sc-border:         var(--sc-gray-200);
  --sc-border-strong:  var(--sc-gray-300);
  --sc-text:           var(--sc-gray-900);
  --sc-text-2:         var(--sc-gray-700);
  --sc-text-muted:     var(--sc-gray-500);    /* placeholders, meta — not for body copy */
  --sc-heading:        var(--sc-navy-600);
  --sc-link:           var(--sc-teal-text);
  --sc-link-hover:     var(--sc-teal-800);
  --sc-primary:        var(--sc-teal-500);
  --sc-primary-hover:  var(--sc-teal-600);
  --sc-primary-text:   var(--sc-navy-950);    /* dark text on teal: 6.6:1 — white on teal-500 is 2.5:1 */
  --sc-secondary:      var(--sc-navy-600);
  --sc-secondary-hover:var(--sc-navy-700);
  --sc-secondary-text: var(--sc-gray-0);
  --sc-accent:         var(--sc-teal-500);
  --sc-focus:          var(--sc-teal-500);
  --sc-selection:      var(--sc-teal-100);
  --sc-logo-ink:       var(--sc-navy-600);    /* monitor + "Signa" */
  --sc-logo-accent:    var(--sc-teal-500);    /* play + arcs + "Cast" */

  /* ---- typography ---- */
  --sc-font-display: "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --sc-font-body:    "Public Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --sc-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sc-weight-regular: 400;
  --sc-weight-medium:  500;
  --sc-weight-semibold:600;
  --sc-weight-bold:    800;   /* display headings, buttons, wordmark */
  --sc-weight-black:   900;   /* hero display only */
  --sc-text-xs:   12px;
  --sc-text-sm:   14px;
  --sc-text-md:   16px;
  --sc-text-lg:   18px;
  --sc-text-xl:   20px;
  --sc-text-2xl:  24px;
  --sc-text-3xl:  30px;
  --sc-text-4xl:  38px;
  --sc-text-5xl:  clamp(38px, 5.4vw, 62px);
  --sc-leading-tight:  1.1;
  --sc-leading-snug:   1.3;
  --sc-leading-normal: 1.6;
  --sc-tracking-tight: -0.02em;
  --sc-tracking-caps:  0.1em;

  /* ---- spacing (4px grid) ---- */
  --sc-space-1:  4px;
  --sc-space-2:  8px;
  --sc-space-3:  12px;
  --sc-space-4:  16px;
  --sc-space-5:  20px;
  --sc-space-6:  24px;
  --sc-space-8:  32px;
  --sc-space-10: 40px;
  --sc-space-12: 48px;
  --sc-space-16: 64px;
  --sc-space-20: 80px;

  /* ---- radius ---- */
  --sc-radius-xs:  4px;
  --sc-radius-sm:  6px;
  --sc-radius-md:  8px;    /* inputs, buttons in apps */
  --sc-radius-lg:  12px;   /* menus, thumbnails */
  --sc-radius-xl:  16px;   /* cards */
  --sc-radius-2xl: 24px;
  --sc-radius-full: 999px; /* pills, marketing buttons */

  /* ---- shadows (navy-tinted) ---- */
  --sc-shadow-sm: 0 1px 2px rgba(10, 50, 114, 0.06), 0 1px 3px rgba(10, 50, 114, 0.08);
  --sc-shadow-md: 0 10px 30px rgba(10, 50, 114, 0.14);
  --sc-shadow-lg: 0 20px 50px rgba(10, 50, 114, 0.14);
  --sc-shadow-xl: 0 30px 70px rgba(10, 50, 114, 0.18);

  /* ---- motion ---- */
  --sc-duration-fast: 150ms;
  --sc-duration:      250ms;
  --sc-ease:          cubic-bezier(0.2, 0, 0, 1);

  /* ---- misc ---- */
  --sc-focus-ring: 0 0 0 3px rgba(0, 184, 170, 0.35);
  --sc-header-h:   56px;

  color-scheme: light;
}

/* Dark surfaces: Player chrome, preview header, the "nothing scheduled" screen.
   Opt in with data-theme="dark" on <html>; data-theme="auto" follows the OS. */
[data-theme="dark"] {
  --sc-bg:             #0B1426;
  --sc-bg-2:           #0F1A30;
  --sc-surface:        #131C2E;
  --sc-surface-2:      #1A2540;
  --sc-border:         #24314A;
  --sc-border-strong:  #34435F;
  --sc-text:           #E6ECF5;
  --sc-text-2:         #C5D0E3;
  --sc-text-muted:     #9AA7BE;
  --sc-heading:        #FFFFFF;
  --sc-link:           var(--sc-teal-300);
  --sc-link-hover:     var(--sc-teal-200);
  --sc-primary:        var(--sc-teal-500);
  --sc-primary-hover:  var(--sc-teal-400);
  --sc-primary-text:   var(--sc-navy-950);
  --sc-secondary:      #1A2540;
  --sc-secondary-hover:#24314A;
  --sc-secondary-text: #FFFFFF;
  --sc-selection:      rgba(0, 184, 170, 0.3);
  --sc-logo-ink:       #FFFFFF;
  --sc-logo-accent:    var(--sc-teal-400);
  --sc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sc-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
  --sc-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
  --sc-shadow-xl: 0 30px 70px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --sc-bg:             #0B1426;
    --sc-bg-2:           #0F1A30;
    --sc-surface:        #131C2E;
    --sc-surface-2:      #1A2540;
    --sc-border:         #24314A;
    --sc-border-strong:  #34435F;
    --sc-text:           #E6ECF5;
    --sc-text-2:         #C5D0E3;
    --sc-text-muted:     #9AA7BE;
    --sc-heading:        #FFFFFF;
    --sc-link:           var(--sc-teal-300);
    --sc-link-hover:     var(--sc-teal-200);
    --sc-primary:        var(--sc-teal-500);
    --sc-primary-hover:  var(--sc-teal-400);
    --sc-primary-text:   var(--sc-navy-950);
    --sc-secondary:      #1A2540;
    --sc-secondary-hover:#24314A;
    --sc-secondary-text: #FFFFFF;
    --sc-selection:      rgba(0, 184, 170, 0.3);
    --sc-logo-ink:       #FFFFFF;
    --sc-logo-accent:    var(--sc-teal-400);
    --sc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sc-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
    --sc-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
    --sc-shadow-xl: 0 30px 70px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}