/* ─── SIGNO MEDIA — Brand Tokens (Styleguide 2026-02-22) ─────────────── */

@font-face {
  font-family: 'TT Rounds Neue';
  src: url('/v2/static/fonts/TTRoundsNeue-CondRegular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TT Rounds Neue';
  src: url('/v2/static/fonts/TTRoundsNeue-CondDBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── SIGNO brand palette ── */
  --signo-blue:           #0a4479;
  --signo-blue-dark:      #073357;
  --signo-green:          #89b79c;
  --signo-green-dark:     #6a9c7e;
  --signo-grey:           #878786;

  /* Tints (100 → 20 %) — digital UI structure */
  --signo-blue-80:        #3b6a94;
  --signo-blue-60:        #6c8faf;
  --signo-blue-40:        #9db5ca;
  --signo-blue-20:        #cedae4;
  --signo-green-80:        #a1c5b0;
  --signo-green-60:        #b9d4c4;
  --signo-green-40:        #d0e2d8;
  --signo-green-20:        #e8f1eb;
  --signo-grey-80:        #9f9f9e;
  --signo-grey-60:        #b7b7b6;
  --signo-grey-40:        #cfcfce;
  --signo-grey-20:        #e7e7e7;

  /* ── Legacy aliases (glass theme + existing templates) ── */
  --gc-navy:              var(--signo-blue);
  --gc-navy-soft:         var(--signo-blue-60);
  --gc-sage:              var(--signo-green);
  --gc-sage-deep:         var(--signo-green-dark);
  --gc-ink:               #111827;
  --gc-ink-2:             #4b5563;
  --gc-ink-3:             var(--signo-grey);
  --gc-amber:             #d99a3a;
  --gc-amber-deep:        #8a6018;
  --gc-coral:             #c0392b;
  --gc-coral-deep:        #9c3b22;
  --gc-glass:             rgba(255, 255, 255, 0.55);
  --gc-glass-strong:      rgba(255, 255, 255, 0.78);
  --gc-glass-edge:        rgba(255, 255, 255, 0.92);
  --gc-glass-shadow:      0 1px 3px rgba(28, 31, 41, 0.04), 0 20px 60px -20px rgba(28, 31, 41, 0.12);
  --gc-glass-shadow-md:   0 4px 16px rgba(28, 31, 41, 0.06), 0 30px 80px -20px rgba(28, 31, 41, 0.18);
  --gc-divider:           #e8e8e8;

  /* ── Semantic brand mapping ── */
  --color-primary:          var(--signo-blue);
  --color-primary-dark:   var(--signo-blue-dark);
  --color-primary-light:  var(--signo-blue-20);
  --color-primary-mid:    var(--signo-blue-60);
  --color-accent:         var(--signo-green);
  --color-accent-dark:    var(--signo-green-dark);
  --color-accent-light:   var(--signo-green-20);
  --color-gray:           var(--signo-grey);
  --color-gray-light:     var(--signo-grey-20);

  --color-danger:         var(--gc-coral);
  --color-danger-light:   #fdf0ef;
  --color-warning:        var(--gc-amber);
  --color-warning-light:  #fdf6e8;
  --color-success:        var(--signo-green);
  --color-success-light:  var(--signo-green-20);

  /* ── Surfaces (brand mode defaults) ── */
  --page-bg:              #f4f5f7;
  --surface:              #ffffff;
  --surface-alt:          var(--signo-grey-20);
  --border-subtle:        #e8e8e8;
  --border-medium:        var(--signo-grey-40);

  /* ── Text ── */
  --text-primary:         var(--signo-blue);
  --text-body:            #111827;
  --text-secondary:       var(--gc-ink-2);
  --text-muted:           var(--signo-grey);
  --text-inverse:         #ffffff;

  /* ── Sidebar (brand) ── */
  --sidebar-width:        232px;
  --sidebar-bg:           var(--signo-blue);
  --sidebar-text:         rgba(255, 255, 255, 0.78);
  --sidebar-text-active:  #ffffff;
  --sidebar-active-bg:    rgba(255, 255, 255, 0.12);
  --sidebar-hover-bg:     rgba(255, 255, 255, 0.07);
  --sidebar-accent:       var(--signo-green);

  /* ── Topbar ── */
  --topbar-height:        54px;
  --topbar-bg:            #ffffff;
  --topbar-border:        var(--border-subtle);

  /* ── Cards ── */
  --card-radius:          12px;
  --card-shadow:          0 1px 3px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.04);
  --card-shadow-hover:    0 4px 16px rgba(0, 0, 0, 0.08);

  /* ── Typography (TT Rounds Neue — styleguide hierarchy) ── */
  --font-family:          'TT Rounds Neue', 'Segoe UI', system-ui, sans-serif;
  --font-size-h1:         36px;
  --font-size-h2:         22px;
  --font-size-h3:         17px;
  --font-size-h4:         14px;
  --font-size-body:       15px;
  --font-size-small:      13px;
  --font-size-caption:    11px;
  --font-size-xs:         11px;
  --font-size-sm:         13px;
  --font-size-base:       15px;
  --font-size-md:         16px;
  --font-size-lg:         18px;
  --font-size-xl:         24px;
  --font-size-2xl:        40px;
  --font-weight-normal:   400;
  --font-weight-bold:     700;
  --line-height-tight:    1.15;
  --line-height-normal:   1.55;
  --letter-spacing-label: 0.10em;

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Radius ── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --transition-fast:   180ms ease;
  --transition-normal: 220ms ease;
  --transition-slow:   350ms ease;

  /* ── Z-index ── */
  --z-sidebar:  100;
  --z-topbar:   200;
  --z-modal:    400;
  --z-toast:    600;
}