/* =====================================================================
   DakPariksha design tokens — ONE brand for marketing, app and student portal
   (Plan §1.4 design-system unification + §1.5 dark mode)

   Source of truth = the postal-brand system already in home.ejs / header.ejs / footer.ejs
   (postal red / blue / gold · Fraunces + IBM Plex Mono + Inter).
   Values below are the exact "First Class Mail" tokens from views/partials/postal-base.ejs
   (--dk-red / --dk-blue / --dk-gold / paper / ink), so marketing pages and --dp-* agree.

   Load order in every layout <head>:
     1. /css/tokens.css          ← this file
     2. legacy css (main.css, student css …)
     3. /css/tokens-bridge.css   ← generated by scripts/design-audit.js; remaps legacy vars onto tokens
     4. /css/motion.css
   ===================================================================== */

:root {
  /* ---- brand primitives ---- */
  --dp-red:        #D62839;   /* = --dk-red */
  --dp-red-600:    #A4162A;   /* = --dk-red-2 */
  --dp-red-50:     #FBE9EB;
  --dp-blue:       #2B4C8C;   /* = --dk-blue */
  --dp-blue-600:   #1F3A6E;
  --dp-blue-50:    #ECF0F8;
  --dp-gold:       #C9962E;   /* = --dk-gold */
  --dp-gold-50:    #FBF3E1;

  /* ---- semantic ---- */
  --dp-brand:          var(--dp-red);
  --dp-brand-hover:    var(--dp-red-600);
  --dp-brand-contrast: #FFFFFF;
  --dp-accent:         var(--dp-blue);
  --dp-highlight:      var(--dp-gold);

  --dp-bg:          #F6EEDD;  /* = --dk-paper */
  --dp-surface:     #FCF8EF;  /* = --dk-white */
  --dp-surface-2:   #EFE3C8;  /* = --dk-paper-2 */
  --dp-text:        #1C2431;  /* = --dk-ink */
  --dp-text-muted:  #6E6455;  /* = --dk-muted */
  --dp-border:        rgba(28, 36, 49, .16); /* = --dk-line */
  --dp-border-strong: rgba(28, 36, 49, .32);
  --dp-focus:       rgba(214, 40, 57, .45);

  --dp-success:    #147A3D;  --dp-success-bg: #E7F5EC;
  --dp-warning:    #9A6200;  --dp-warning-bg: #FFF4DB;
  --dp-danger:     #B42318;  --dp-danger-bg:  #FDECEA;
  --dp-info:       #0B5CAD;  --dp-info-bg:    #E8F1FB;

  /* ---- type ---- */
  --dp-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --dp-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Telugu', sans-serif;
  --dp-font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --dp-text-xs: .75rem; --dp-text-sm: .875rem; --dp-text-md: 1rem; --dp-text-lg: 1.125rem;
  --dp-text-xl: 1.375rem; --dp-text-2xl: 1.75rem; --dp-text-3xl: 2.25rem;

  /* ---- space / shape / depth ---- */
  --dp-space-1: 4px; --dp-space-2: 8px; --dp-space-3: 12px; --dp-space-4: 16px;
  --dp-space-5: 24px; --dp-space-6: 32px; --dp-space-7: 48px; --dp-space-8: 64px;
  --dp-radius-sm: 6px; --dp-radius: 10px; --dp-radius-lg: 16px; --dp-radius-pill: 999px;
  --dp-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --dp-shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .05);
  --dp-shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);

  /* ---- motion ---- */
  --dp-ease: cubic-bezier(.2, .7, .2, 1);
  --dp-dur-fast: 120ms; --dp-dur: 220ms; --dp-dur-slow: 420ms;

  color-scheme: light;
}

/* ---- dark theme: flip tokens only; components need no changes ---- */
:root[data-theme="dark"] {
  --dp-red:      #F0485F;
  --dp-red-600:  #FF6B7F;
  --dp-red-50:   #3A1419;
  --dp-blue:     #7FA7F0;
  --dp-blue-600: #A3C0F5;
  --dp-blue-50:  #16223A;
  --dp-gold:     #F2C15A;
  --dp-gold-50:  #3A2E12;

  --dp-brand-contrast: #1B0A0D;
  --dp-bg:          #0F1216;
  --dp-surface:     #171B21;
  --dp-surface-2:   #1F242C;
  --dp-text:        #E8EAED;
  --dp-text-muted:  #A2AAB7;
  --dp-border:        #2A3039;
  --dp-border-strong: #3A424E;
  --dp-focus:       rgba(127, 167, 240, .55);

  --dp-success: #5CCB8A; --dp-success-bg: #12281B;
  --dp-warning: #F2C15A; --dp-warning-bg: #2E2410;
  --dp-danger:  #FF7B6E; --dp-danger-bg:  #2E1411;
  --dp-info:    #7FB6F0; --dp-info-bg:    #12233A;

  --dp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --dp-shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
  --dp-shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* ---- shared component primitives (opt-in classes; safe alongside legacy CSS) ---- */
.dp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--dp-radius);
  font: 600 var(--dp-text-sm)/1 var(--dp-font-body); text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
}
.dp-btn--primary { background: var(--dp-brand); color: var(--dp-brand-contrast); }
.dp-btn--primary:hover { background: var(--dp-brand-hover); }
.dp-btn--accent  { background: var(--dp-accent); color: #fff; }
.dp-btn--ghost   { background: transparent; color: var(--dp-text); border-color: var(--dp-border-strong); }
.dp-btn--ghost:hover { background: var(--dp-surface-2); }
.dp-card {
  background: var(--dp-surface); color: var(--dp-text);
  border: 1px solid var(--dp-border); border-radius: var(--dp-radius-lg);
  box-shadow: var(--dp-shadow-sm); padding: var(--dp-space-5);
}
.dp-pill { display: inline-block; padding: 2px 10px; border-radius: var(--dp-radius-pill); font-size: var(--dp-text-xs); font-weight: 600; }
.dp-pill--success { background: var(--dp-success-bg); color: var(--dp-success); }
.dp-pill--warning { background: var(--dp-warning-bg); color: var(--dp-warning); }
.dp-pill--danger  { background: var(--dp-danger-bg);  color: var(--dp-danger); }
.dp-pill--info    { background: var(--dp-info-bg);    color: var(--dp-info); }

/* Theme toggle button (see views/partials/theme-toggle.ejs) */
.dp-theme-toggle {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--dp-border); background: var(--dp-surface); color: var(--dp-text); cursor: pointer;
}
.dp-theme-toggle .dp-icon-sun { display: none; }
:root[data-theme="dark"] .dp-theme-toggle .dp-icon-sun { display: block; }
:root[data-theme="dark"] .dp-theme-toggle .dp-icon-moon { display: none; }