/* ================================================================
   TOKENS.CSS — DLE News Manager
   Bootstrap 5.3+ CSS custom property overrides
   Aesthetic: refined editorial — warm stone × calm indigo
   ================================================================ */

/* ── Google Fonts ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Inter+Tight:wght@400;500;600;700&display=swap');

/* ── Design-level custom properties ────────────────────────────── */
:root {
  --nm-font-body:    'Inter Tight', system-ui, -apple-system, sans-serif;
  --nm-font-display: 'Fraunces', Georgia, serif;

  --nm-text-xs:   0.75rem;    /* 12px */
  --nm-text-sm:   0.8125rem;  /* 13px */
  --nm-text-base: 0.9375rem;  /* 15px */
  --nm-text-md:   1.125rem;   /* 18px */
  --nm-text-lg:   1.5rem;     /* 24px */
  --nm-text-xl:   2rem;       /* 32px */
  --nm-text-2xl:  2.75rem;    /* 44px */
  --nm-leading:   1.45;
}

/* ================================================================
   LIGHT THEME
   ================================================================ */
:root,
[data-bs-theme="light"] {

  /* Primary — Indigo */
  --bs-primary:                  #3B5EFF;
  --bs-primary-rgb:              59, 94, 255;
  --bs-primary-bg-subtle:        #edf0ff;
  --bs-primary-border-subtle:    #c3cdff;
  --bs-primary-text-emphasis:    #1a38cc;

  /* Secondary — warm stone, replaces cold #6c757d */
  --bs-secondary:                #6b6460;
  --bs-secondary-rgb:            107, 100, 96;
  --bs-secondary-bg-subtle:      #f2efeb;
  --bs-secondary-border-subtle:  #d9d5cf;
  --bs-secondary-text-emphasis:  #3c3936;

  /* Success — muted sage */
  --bs-success:                  #2d7d52;
  --bs-success-rgb:              45, 125, 82;
  --bs-success-bg-subtle:        #e5f3ec;
  --bs-success-border-subtle:    #a3d4b8;
  --bs-success-text-emphasis:    #174d31;

  /* Warning — amber, not neon yellow */
  --bs-warning:                  #b85c00;
  --bs-warning-rgb:              184, 92, 0;
  --bs-warning-bg-subtle:        #fdf0e3;
  --bs-warning-border-subtle:    #f0c08a;
  --bs-warning-text-emphasis:    #773b00;

  /* Danger — brick, not candy red */
  --bs-danger:                   #c0392b;
  --bs-danger-rgb:               192, 57, 43;
  --bs-danger-bg-subtle:         #fcecea;
  --bs-danger-border-subtle:     #eda89e;
  --bs-danger-text-emphasis:     #7a221a;

  /* Info */
  --bs-info:                     #0e7fa3;
  --bs-info-rgb:                 14, 127, 163;
  --bs-info-bg-subtle:           #e1f3f9;
  --bs-info-border-subtle:       #98d8ec;
  --bs-info-text-emphasis:       #084e65;

  /* Body & surfaces */
  --bs-body-bg:                  #faf9f7;
  --bs-body-color:               #1a1714;
  --bs-secondary-bg:             #f2efeb;
  --bs-tertiary-bg:              #ede9e4;
  --bs-emphasis-color:           #0f0d0b;
  --bs-secondary-color:          #6b6460;
  --bs-tertiary-color:           #9e9793;

  /* Borders */
  --bs-border-color:             #e4e1dd;
  --bs-border-color-translucent: rgba(26, 23, 20, 0.1);

  /* Links */
  --bs-link-color:               #3B5EFF;
  --bs-link-color-rgb:           59, 94, 255;
  --bs-link-hover-color:         #1a38cc;
  --bs-link-hover-color-rgb:     26, 56, 204;
  --bs-link-decoration:          none;

  /* Cards */
  --bs-card-bg:                  #ffffff;
  --bs-card-border-color:        #e4e1dd;
  --bs-card-cap-bg:              #f7f5f2;
  --bs-card-spacer-x:            1.25rem;
  --bs-card-spacer-y:            1rem;

  /* Typography */
  --bs-body-font-family:         var(--nm-font-body);
  --bs-body-font-size:           var(--nm-text-base);
  --bs-body-font-weight:         400;
  --bs-body-line-height:         var(--nm-leading);
  --bs-heading-color:            #1a1714;

  /* Border radius */
  --bs-border-radius:            6px;
  --bs-border-radius-sm:         4px;
  --bs-border-radius-lg:         10px;
  --bs-border-radius-xl:         14px;
  --bs-border-radius-xxl:        18px;
  --bs-border-radius-pill:       9999px;

  /* Two-layer shadows */
  --bs-box-shadow-sm:
    0 1px 2px  rgba(26, 23, 20, 0.05),
    0 4px 12px rgba(26, 23, 20, 0.06);
  --bs-box-shadow:
    0 1px 2px  rgba(26, 23, 20, 0.06),
    0 8px 24px rgba(26, 23, 20, 0.08);
  --bs-box-shadow-lg:
    0 1px 2px  rgba(26, 23, 20, 0.06),
    0 16px 48px rgba(26, 23, 20, 0.12);
  --bs-box-shadow-inset:
    inset 0 1px 3px rgba(26, 23, 20, 0.08);

  /* Tables */
  --bs-table-striped-bg:   rgba(26, 23, 20, 0.02);
  --bs-table-hover-bg:     rgba(59, 94, 255, 0.04);
  --bs-table-border-color: #ede9e4;

  /* Focus ring */
  --bs-focus-ring-width:   2px;
  --bs-focus-ring-opacity: 1;
  --bs-focus-ring-color:   rgba(59, 94, 255, 0.28);

  /* Forms */
  --bs-form-valid-color:   #2d7d52;
  --bs-form-invalid-color: #c0392b;

  /* Navbar custom tokens */
  --nm-navbar-bg:           #16130e;
  --nm-navbar-border:       #2c2820;
  --nm-navbar-link:         rgba(240, 236, 230, 0.65);
  --nm-navbar-link-hover:   #f0ece6;
  --nm-navbar-link-active:  #ffffff;
}

/* ================================================================
   DARK THEME
   ================================================================ */
[data-bs-theme="dark"] {

  --bs-primary:                  #6b8aff;
  --bs-primary-rgb:              107, 138, 255;
  --bs-primary-bg-subtle:        #141d40;
  --bs-primary-border-subtle:    #2a3d8a;
  --bs-primary-text-emphasis:    #a3b8ff;

  --bs-secondary:                #9e9793;
  --bs-secondary-rgb:            158, 151, 147;
  --bs-secondary-bg-subtle:      #26221d;
  --bs-secondary-border-subtle:  #46423c;
  --bs-secondary-text-emphasis:  #c8c4be;

  --bs-success:                  #4db87a;
  --bs-success-rgb:              77, 184, 122;
  --bs-success-bg-subtle:        #0b2419;
  --bs-success-border-subtle:    #1d5c37;
  --bs-success-text-emphasis:    #85d4aa;

  --bs-warning:                  #f09248;
  --bs-warning-rgb:              240, 146, 72;
  --bs-warning-bg-subtle:        #2a1600;
  --bs-warning-border-subtle:    #703a00;
  --bs-warning-text-emphasis:    #f5b884;

  --bs-danger:                   #e06055;
  --bs-danger-rgb:               224, 96, 85;
  --bs-danger-bg-subtle:         #280b08;
  --bs-danger-border-subtle:     #6e2218;
  --bs-danger-text-emphasis:     #f09d96;

  --bs-info:                     #3bbce0;
  --bs-info-rgb:                 59, 188, 224;
  --bs-info-bg-subtle:           #041820;
  --bs-info-border-subtle:       #0c4d62;
  --bs-info-text-emphasis:       #76d8f0;

  /* Body & surfaces — warm dark */
  --bs-body-bg:                  #16140f;
  --bs-body-color:               #f0ece6;
  --bs-secondary-bg:             #1e1b15;
  --bs-tertiary-bg:              #252119;
  --bs-emphasis-color:           #faf9f7;
  --bs-secondary-color:          #a09890;
  --bs-tertiary-color:           #6b6458;

  /* Borders */
  --bs-border-color:             #38332a;
  --bs-border-color-translucent: rgba(240, 236, 230, 0.1);

  /* Links */
  --bs-link-color:               #6b8aff;
  --bs-link-color-rgb:           107, 138, 255;
  --bs-link-hover-color:         #9db0ff;
  --bs-link-hover-color-rgb:     157, 176, 255;

  /* Cards */
  --bs-card-bg:                  #1e1b15;
  --bs-card-border-color:        #38332a;
  --bs-card-cap-bg:              #242018;

  /* Tables */
  --bs-table-striped-bg:   rgba(240, 236, 230, 0.02);
  --bs-table-hover-bg:     rgba(107, 138, 255, 0.06);
  --bs-table-border-color: #2c2820;
  --bs-table-color:        var(--bs-body-color);

  /* Shadows */
  --bs-box-shadow-sm:
    0 1px 2px  rgba(0, 0, 0, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.20);
  --bs-box-shadow:
    0 1px 2px  rgba(0, 0, 0, 0.28),
    0 8px 24px rgba(0, 0, 0, 0.24);
  --bs-box-shadow-lg:
    0 1px 2px  rgba(0, 0, 0, 0.32),
    0 16px 48px rgba(0, 0, 0, 0.36);

  /* Focus ring */
  --bs-focus-ring-color: rgba(107, 138, 255, 0.35);

  /* Forms */
  --bs-form-valid-color:   #4db87a;
  --bs-form-invalid-color: #e06055;

  /* Navbar */
  --nm-navbar-bg:           #100f0a;
  --nm-navbar-border:       #242018;
  --nm-navbar-link:         rgba(240, 236, 230, 0.55);
  --nm-navbar-link-hover:   #f0ece6;
  --nm-navbar-link-active:  #ffffff;
}

/* ================================================================
   BASE APPLICATION
   ================================================================ */

body {
  font-size: var(--nm-text-base);
  line-height: var(--nm-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display headings (≥24px) — Fraunces */
h1, .h1, h2, .h2,
.display-1, .display-2, .display-3, .display-4 {
  font-family: var(--nm-font-display);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Functional headings — Inter Tight */
h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--nm-font-body);
  letter-spacing: -0.01em;
}

/* ── Focus ring ─────────────────────────────────────────────── */
:focus-visible {
  outline: var(--bs-focus-ring-width) solid var(--bs-primary);
  outline-offset: 3px;
  border-radius: var(--bs-border-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ── Skeleton shimmer ───────────────────────────────────────── */
@keyframes nm-shimmer {
  from { background-position: -800px 0; }
  to   { background-position:  800px 0; }
}
.nm-skeleton {
  background: linear-gradient(
    90deg,
    var(--bs-secondary-bg) 25%,
    var(--bs-tertiary-bg)  50%,
    var(--bs-secondary-bg) 75%
  );
  background-size: 1600px 100%;
  animation: nm-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--bs-border-radius-sm);
  color: transparent !important;
  user-select: none;
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:       0.01ms !important;
  }
  .nm-skeleton { animation: none; background: var(--bs-secondary-bg); }
}