/* ============================================================================
   The Developer School — Design System (single source of truth)
   ----------------------------------------------------------------------------
   Canonical design tokens + shared primitives. Everything brand-related
   (colours, radii, shadows, type) lives HERE and nowhere else. Page-level
   stylesheets must reference these tokens (var(--ds-*)) instead of hardcoding
   hex values, so the brand can never drift across pages again.

   Loaded globally in resources/views/frontend/layouts/app.blade.php BEFORE
   style.css so page styles can consume the tokens.

   Primitives are namespaced with `ds-` to avoid colliding with Bootstrap
   (e.g. Bootstrap owns `.btn`; we own `.ds-btn`).
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------- */
  --ds-blue:        #2563eb;   /* primary accent — buttons, links, active */
  --ds-blue-dark:   #1d4ed8;   /* hover / pressed */
  --ds-blue-soft:   #e8f0ff;   /* tinted backgrounds, icon chips */
  --ds-navy:        #0b1f3a;   /* hero / "island" backgrounds */
  --ds-secondary:   var(--ds-navy);   /* structural / hero (alias of navy) */
  --ds-highlight:   #7eb0ff;   /* accent word on navy, data-viz pop */

  /* ---- Ink & text ------------------------------------------------------- */
  --ds-ink:         #0f172a;   /* headings, primary text */
  --ds-body:        #475569;   /* body copy */
  --ds-muted:       #94a3b8;   /* labels, captions, secondary */
  --ds-disabled:    #cbd5e1;   /* disabled text / placeholders */

  /* ---- Surfaces & lines ------------------------------------------------- */
  --ds-bg:          #f4f7fb;   /* page background */
  --ds-surface:     #ffffff;   /* cards, panels */
  --ds-elev:        #ffffff;   /* elevated surface — modals, popovers, menus */
  --ds-soft:        #eef3f9;   /* soft section background */
  --ds-line:        #e6ebf5;   /* borders, dividers */

  /* ---- UI elements ------------------------------------------------------ */
  --ds-input-bg:     #ffffff;
  --ds-input-border: var(--ds-line);
  --ds-focus-ring:   rgba(37,99,235,.45);   /* focus-visible outlines/rings */

  /* ---- Header / footer (independently themeable) ------------------------ */
  /* Default to the global tokens so they cascade (incl. dark mode) until the
     admin sets an explicit colour, at which point header/footer break out. */
  --ds-header-bg:      var(--ds-surface);   /* navbar background */
  --ds-header-text:    var(--ds-ink);       /* nav links / labels */
  --ds-header-hover:   var(--ds-blue);      /* nav link hover */
  --ds-footer-bg:      var(--ds-surface);   /* footer background */
  --ds-footer-text:    var(--ds-body);      /* footer body text */
  --ds-footer-heading: var(--ds-ink);       /* footer headings */
  --ds-footer-link:    var(--ds-blue);      /* footer links */

  /* ---- Status ----------------------------------------------------------- */
  --ds-success:      #16a34a;
  --ds-success-soft: #d1fae5;
  --ds-success-ink:  #065f46;
  --ds-danger:       #dc2626;
  --ds-danger-soft:  #fee2e2;
  --ds-danger-ink:   #991b1b;
  --ds-warning:      #f59e0b;
  --ds-warning-soft: #fff7e6;
  --ds-warning-ink:  #78350f;
  --ds-info:         #0ea5e9;   /* system messages / neutral info */
  --ds-info-soft:    #e0f2fe;
  --ds-info-ink:     #075985;

  /* ---- Gradients (marketing/hero surfaces ONLY — keep CTAs flat) -------- */
  --ds-grad-brand:  linear-gradient(135deg, var(--ds-blue) 0%, #4f46e5 100%);
  --ds-grad-hero:   radial-gradient(120% 120% at 50% 0%, #14315c 0%, var(--ds-navy) 70%);

  /* ---- Radius ----------------------------------------------------------- */
  --ds-r-sm:   8px;
  --ds-r:     12px;
  --ds-r-lg:  16px;
  --ds-r-xl:  20px;
  --ds-r-pill: 999px;

  /* ---- Elevation -------------------------------------------------------- */
  --ds-shadow-sm: 0 4px 20px rgba(15,23,42,.06);
  --ds-shadow:    0 10px 28px rgba(15,23,42,.10);
  --ds-shadow-lg: 0 16px 44px rgba(15,23,42,.14);

  /* ---- Type ------------------------------------------------------------- */
  --ds-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ============================================================================
   Button primitive
   Usage: <a class="ds-btn ds-btn--primary"> ... </a>
   Variants: --primary (filled), --ghost (outline), --light (on dark)
   ========================================================================== */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--ds-font);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  padding: .75rem 1.5rem;
  border-radius: var(--ds-r);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease,
              box-shadow .15s ease, transform .15s ease;
}
.ds-btn:focus-visible {
  outline: 2px solid var(--ds-blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--ds-focus-ring);
}
.ds-btn--primary {
  background: var(--ds-blue);
  border-color: var(--ds-blue);
  color: #fff;
}
.ds-btn--primary:hover {
  background: var(--ds-blue-dark);
  border-color: var(--ds-blue-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgba(37,99,235,.55);
}
.ds-btn--ghost {
  background: var(--ds-surface);
  border-color: var(--ds-line);
  color: var(--ds-ink);
}
.ds-btn--ghost:hover {
  border-color: var(--ds-blue);
  color: var(--ds-blue);
}
.ds-btn--light {
  background: #fff;
  border-color: #fff;
  color: var(--ds-navy);
}
.ds-btn--light:hover {
  background: #e2e8f0;
  border-color: #e2e8f0;
  color: var(--ds-navy);
}
/* Outline button for use ON dark/navy backgrounds */
.ds-btn--ghost-light {
  background: transparent;
  border-color: rgba(255,255,255,.3);
  color: #fff;
}
.ds-btn--ghost-light:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.55);
  color: #fff;
}
.ds-btn--sm { padding: .5rem 1rem; font-size: .82rem; }
.ds-btn--block { width: 100%; }

/* ============================================================================
   Card primitive
   Usage: <div class="ds-card"> ... </div>  (add ds-card--hover for lift)
   ========================================================================== */
.ds-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  box-shadow: var(--ds-shadow-sm);
}
.ds-card--hover {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ds-card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--ds-shadow);
  border-color: var(--ds-blue);
}

/* ============================================================================
   Eyebrow / pill label primitive
   ========================================================================== */
.ds-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ds-blue);
  background: var(--ds-blue-soft);
  padding: .35rem .8rem;
  border-radius: var(--ds-r-pill);
}

/* ============================================================================
   THEME LAYER
   ----------------------------------------------------------------------------
   :root above is the LIGHT theme and the site default (locked look:
   white header/footer, light canvas, navy heroes, flat blue accent).

   A "theme" is just a block that REASSIGNS the same --ds-* variable names.
   Every page/blade reads var(--ds-*), so flipping the theme attribute on <html>
   recolours the entire site with zero per-component work.

   We piggyback on Bootstrap's native `data-bs-theme` attribute, which is ALREADY
   driven by the .theme-toggle buttons in public/js/style.js (persisted to
   localStorage["theme"], default "light"). So one toggle controls Bootstrap
   components AND these tokens together.

   Activate dark:   document.documentElement.setAttribute('data-bs-theme','dark')
   Default (light): no attribute, or data-bs-theme="light"
   ========================================================================== */
[data-bs-theme="dark"] {
  /* Surfaces & lines */
  --ds-bg:          #0b1220;
  --ds-surface:     #111a2e;
  --ds-elev:        #16223c;
  --ds-soft:        #0f1a30;
  --ds-line:        #1f2b45;

  /* Ink & text */
  --ds-ink:         #e8eefc;
  --ds-body:        #aab6cf;
  --ds-muted:       #6b7a99;
  --ds-disabled:    #3b4763;

  /* Brand — lift blue for contrast on dark */
  --ds-blue:        #4d82ff;
  --ds-blue-dark:   #6f9bff;
  --ds-blue-soft:   #16223c;
  --ds-navy:        #0a1426;
  --ds-highlight:   #9cc2ff;

  /* UI elements */
  --ds-input-bg:     #0f1a30;
  --ds-input-border: #2a3a5c;
  --ds-focus-ring:   rgba(77,130,255,.45);

  /* Header / footer — slightly deeper than surface for separation */
  --ds-header-bg:      #0d1526;
  --ds-header-text:    #e8eefc;
  --ds-header-hover:   #6f9bff;
  --ds-footer-bg:      #0d1526;
  --ds-footer-text:    #aab6cf;
  --ds-footer-heading: #e8eefc;
  --ds-footer-link:    #6f9bff;

  /* Status — lift the base hues for contrast on dark; darken soft tints */
  --ds-success:      #22c55e;
  --ds-success-soft: #0f2c24;  --ds-success-ink: #6ee7b7;
  --ds-danger:       #ef4444;
  --ds-danger-soft:  #2c1517;  --ds-danger-ink:  #fca5a5;
  --ds-warning:      #f59e0b;
  --ds-warning-soft: #2a210f;  --ds-warning-ink: #fcd34d;
  --ds-info:         #38bdf8;
  --ds-info-soft:    #0c2536;  --ds-info-ink:    #7dd3fc;

  /* Elevation reads heavier on dark */
  --ds-shadow-sm: 0 4px 20px rgba(0,0,0,.35);
  --ds-shadow:    0 10px 28px rgba(0,0,0,.45);
  --ds-shadow-lg: 0 16px 44px rgba(0,0,0,.55);

  /* Gradients */
  --ds-grad-hero: radial-gradient(120% 120% at 50% 0%, #16294a 0%, var(--ds-navy) 70%);
}

/* Add future themes the same way, e.g.:
   [data-bs-theme="pro-dev"]       { --ds-blue:#7c3aed; ... }
   [data-bs-theme="high-contrast"] { --ds-line:#000; --ds-body:#000; ... }   */