/* ═══════════════════════════════════════════════════════════════════════════
   DAP ADMIN — TOKEN LAYER

   The one place an admin-side colour, size, radius, shadow or duration is
   written down. Nothing below this file may declare a raw hex, a raw px
   radius, or a raw transition duration; if a value is needed twice, it
   belongs here.

   Load order is  tokens → base → layout → components → modules.
   Only this file declares custom properties on :root.

   ── Palette provenance ──────────────────────────────────────────────────
   The greens and golds are NOT new. They are the institutional seal colours
   already sampled and documented in static/css/public/brand.css, adopted
   here so the admin portal and the public site are recognisably one
   institution. brand.css remains the source of truth; if the seal colours
   are ever re-sampled, they change there first and are mirrored here.

       --c-brand      #08614E   the ring        7.4:1 on white, AAA
       --c-brand-dark #064A3C   ring, deeper   10.2:1 on white
       --c-gold       #F0B000   the flame       decoration only, never text
       --c-gold-deep  #7A5A18   the bronze      6.4:1, gold as text

   The admin side previously ran a #6aab62 pastel unrelated to the seal, at
   roughly 2.9:1 on white — below AA for the small text and icons it was
   carrying. Adopting the seal green fixes that as a side effect.

   Tints are color-mix of the four base hues, never a second copy of a hex,
   for the same reason brand.css does it: the seal is written down once.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ─────────────────────────────────────────────────────────── */
  --dap-primary:        #08614E;
  --dap-primary-text:   #064A3C;
  --dap-primary-light:  color-mix(in srgb, var(--dap-primary) 22%, #ffffff);
  --dap-primary-bg:     color-mix(in srgb, var(--dap-primary)  8%, #ffffff);
  --dap-primary-hover:  color-mix(in srgb, var(--dap-primary) 88%, #000000);

  --dap-accent:         #F0B000;
  --dap-accent-dark:    #7A5A18;
  --dap-accent-light:   color-mix(in srgb, var(--dap-accent) 35%, #ffffff);
  --dap-accent-bg:      color-mix(in srgb, var(--dap-accent) 12%, #ffffff);

  /* ── Neutrals ──────────────────────────────────────────────────────── */
  --dap-white:          #ffffff;
  --dap-bg:             #f4f6f8;
  --dap-surface:        #ffffff;
  --dap-surface-2:      #f8faf9;
  --dap-text:           #212529;
  --dap-text-secondary: #495057;
  --dap-muted:          #6c757d;
  --dap-border:         #dee2e6;
  --dap-border-soft:    #f1f3f2;
  --dap-disabled:       #adb5bd;

  /* ── Semantic ──────────────────────────────────────────────────────────
     Each state is a background/foreground pair. Foregrounds are chosen to
     clear 4.5:1 on their own background so a badge can carry real text. */
  --dap-success-bg:   #d1e7dd;  --dap-success-fg:   #0a3622;
  --dap-info-bg:      #dbeafe;  --dap-info-fg:      #1e40af;
  --dap-warning-bg:   #fff3cd;  --dap-warning-fg:   #856404;
  --dap-danger-bg:    #fee2e2;  --dap-danger-fg:    #991b1b;
  --dap-neutral-bg:   #f3f4f6;  --dap-neutral-fg:   #4b5563;
  --dap-danger:       #dc3545;  /* error text, destructive icons */

  /* Solid dots and fills, where a chip needs a mark rather than a field */
  --dap-dot-success: #10b981;
  --dap-dot-warning: #f59e0b;
  --dap-dot-neutral: #9ca3af;
  --dap-dot-danger:  #ef4444;

  /* ── Typography ────────────────────────────────────────────────────────
     A snapped scale. The admin side previously carried 37 distinct font
     sizes between 0.61rem and 3rem — values that differed by a third of a
     pixel and meant nothing. These eleven steps replace them. */
  --dap-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-3xs:  0.625rem;   /* 10px — sidebar section eyebrows              */
  --fs-2xs:  0.6875rem;  /* 11px — badge text, legend keys               */
  --fs-xs:   0.75rem;    /* 12px — captions, table headers, meta         */
  --fs-sm:   0.8125rem;  /* 13px — secondary body, nav links, breadcrumb */
  --fs-base: 0.875rem;   /* 14px — body                                  */
  --fs-md:   0.9375rem;  /* 15px — emphasised body, card titles          */
  --fs-lg:   1rem;       /* 16px — panel titles                          */
  --fs-xl:   1.125rem;   /* 18px — page title                            */
  --fs-2xl:  1.375rem;   /* 22px — display                               */
  --fs-3xl:  1.75rem;    /* 28px — KPI numerals                          */
  --fs-4xl:  2.25rem;    /* 36px — empty-state glyphs                    */

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;

  --lh-tight: 1.25;
  --lh-snug:  1.4;
  --lh-base:  1.55;

  --ls-wide:  0.05em;   /* uppercase labels */
  --ls-wider: 0.08em;   /* uppercase eyebrows */

  /* ── Spacing ───────────────────────────────────────────────────────────
     4px base. Component padding picks a step; it does not invent 13px. */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── Radius ────────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;   /* buttons, inputs */
  --radius-xl:   12px;  /* cards, panels   */
  --radius-pill: 999px;

  /* ── Elevation ─────────────────────────────────────────────────────────
     Four steps. Anything needing a fifth is probably a card that should be
     a panel. */
  --shadow-xs: 0 1px 3px rgba(16, 24, 32, 0.05);
  --shadow-sm: 0 1px 4px rgba(16, 24, 32, 0.07);
  --shadow-md: 0 4px 14px rgba(16, 24, 32, 0.09);
  --shadow-lg: 0 10px 30px rgba(16, 24, 32, 0.14);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--dap-primary) 28%, transparent);

  /* ── Motion ────────────────────────────────────────────────────────────
     Two durations. Anything slower than --t-slow on a dashboard is a delay,
     not an animation. Honoured by the prefers-reduced-motion block in
     base.css, which zeroes all three. */
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 300ms;
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ────────────────────────────────────────────────────────── */
  --dap-sidebar-w:   248px;
  --dap-navbar-h:    64px;
  --dap-content-max: 1280px;
  --dap-gutter:      var(--sp-7);

  /* ── Stacking ──────────────────────────────────────────────────────────
     Declared in one place so a new overlay cannot guess a z-index and land
     under the navbar. */
  --z-base:      1;
  --z-sticky:    100;
  --z-navbar:    1040;
  --z-backdrop:  1045;
  --z-drawer:    1050;
  --z-dropdown:  1060;
}

/* Below the drawer breakpoint the shell gives back its side gutter — on a
   375px screen 28px of padding either side costs 15% of the viewport. */
@media (max-width: 767.98px) {
  :root { --dap-gutter: var(--sp-4); }
}