/* DN2 Design Tokens — mirrored from resources/scss/variables/ */

:root {
  /* ===== Greys (1 = darkest, F = lightest) ===== */
  --grey1: #1d1d1d;
  --grey2: #282828;
  --grey3: #3e3e3e;
  --grey5: #5a5a5a;
  --grey7: #848181;
  --greyA: #aeaeae;
  --greyC: #c6c6c6;
  --greyE: #e9e9e9;
  --greyF: #f8f8f8;

  /* ===== Brand blues (primary) ===== */
  --blue1: #00283a;
  --blue2: #003a51; /* default text color */
  --blue5: #0082b4;
  --blue7: #00abed; /* link hover / accent */
  --blue8: #17a0d8;
  --blueD: #cbe1ed; /* disabled text */

  /* ===== Browns (warm secondary) ===== */
  --brown1: #29101a;
  --brown3: #5b4045;
  --brownA: #ccaea3;
  --brownC: #edddd2;

  /* ===== Accents ===== */
  --gold:   #d4af35;
  --green:  #52ba65;
  --red:    #cc3333;
  --orange: #ee6f2e;
  --border-red: #9e0327;
  --dark-red:   #96000f;

  /* ===== Translucent ===== */
  --translucid-black: rgba(0, 0, 0, 0.7);
  --translucid-white: rgba(255, 255, 255, 0.7);

  /* ===== Semantic ===== */
  --bg:                  var(--greyF);
  --modal-bg:            var(--translucid-black);
  --text:                var(--blue2);
  --text-disabled:       var(--blueD);
  --text-grey:           var(--grey3);
  --queue-count:         var(--red);

  /* ===== Layout ===== */
  --desktop-notifier-width: 8.6rem;
  --side-menu-width:        17.4rem;
  --side-bar-width:         26rem;
  --admin-side-bar-width:   28rem;

  --mobile-topbar-height:      6rem;
  --mobile-bottom-bar-height:  5rem;
  --desktop-topbar-height:    11.2rem;
  --desktop-footer-height:    35rem;

  --public-page-top-margin:        2rem;
  --public-page-side-margin:       4rem;
  --public-page-sm-side-margin:    5rem;
  --public-page-md-left-margin:   20rem;
  --public-page-md-right-margin:  10rem;

  --mobile-profile-setting-side-padding:  2rem;
  --desktop-profile-setting-side-padding: 4.5rem;

  /* ===== Transitions ===== */
  --transition-time:        0.3s;
  --out-in-transition-time: 0.2s;
  --avatar-hover-scale:     1.1;

  /* ===== Z-index scale ===== */
  --z-cookie-banner:       120;
  --z-mobile-bottom-bar:   115;
  --z-mobile-menu:         110;
  --z-fullscreen-overlay:  105;
  --z-mobile-topbar:       100;
  --z-thread-sort:          50;
  --z-clickable-right:      10;
  --z-clickable-public:      5;
  --z-mobile-instr:          4;
  --z-banner-public:         3;

  /* ===== Button sizing ===== */
  --btn-vertical-padding:        0.8rem;
  --btn-horizontal-padding:      1.6rem;
  --btn-full-vertical-padding:   2rem;
  --btn-full-horizontal-padding: 3rem;
  --btn-border-width:            0.1rem;
  --btn-border-radius:           0.4rem;
}

/* ===== Root font sizing — DN2 uses 62.5% so 1rem = 10px ===== */
html { font-size: 62.5%; }
body {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }