/* ═══════════════════════════════════════════════════════════════
   DIGIBROOD DESIGN SYSTEM — variables.css
   Single source of truth for the entire site.
   Loaded first; every other file depends on these tokens.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── Brand palette ──────────────────────────────────────── */
  --db-orange:           #ff6a00;
  --db-orange-light:     #ff8c38;
  --db-orange-amber:     #f59e0b;
  --db-orange-deep:      #cc4f00;

  --db-green:            #22c55e;
  --db-green-dark:       #128c7e;

  --db-indigo:           rgba(99, 102, 241, .18);
  --db-cyan:             rgba(6, 182, 212, .13);

  /* ── Neutrals (dark-theme-first) ────────────────────────── */
  --db-bg-primary:       #080e1d;
  --db-bg-card:          rgba(255, 255, 255, 0.055);
  --db-bg-card-solid:    rgba(10, 16, 30, .90);
  --db-bg-elevated:      rgba(255, 255, 255, 0.07);
  --db-bg-hover:         rgba(255, 106, 0, .05);

  --db-border:           rgba(255, 255, 255, 0.09);
  --db-border-subtle:    rgba(255, 255, 255, 0.07);

  --db-text-primary:     #ffffff;
  --db-text-body:        #e2e8f0;
  --db-text-muted:       #7a8faa;
  --db-text-strong:      #c8d6e8;

  /* ── Brand tints (for badges / soft backgrounds) ────────── */
  --db-orange-bg:        rgba(255, 106, 0, .11);
  --db-orange-border:    rgba(255, 106, 0, .22);
  --db-orange-border-hi: rgba(255, 106, 0, .28);
  --db-green-bg:         rgba(34, 197, 94, .14);
  --db-green-border:     rgba(34, 197, 94, .28);

  /* ── Typography ─────────────────────────────────────────── */
  --db-font:             'Poppins', sans-serif;

  --db-fs-xs:            10.5px;
  --db-fs-sm:            11.5px;
  --db-fs-base:          14.5px;
  --db-fs-md:            15.5px;
  --db-fs-lg:            24px;
  --db-fs-h2:            clamp(20px, 2.8vw, 30px);
  --db-fs-h1:            clamp(28px, 3.8vw, 46px);
  --db-fs-display:       clamp(26px, 3vw, 36px);

  --db-lh-tight:         1.18;
  --db-lh-snug:          1.3;
  --db-lh-normal:        1.5;
  --db-lh-relaxed:       1.78;

  --db-ls-tight:         -.022em;
  --db-ls-normal:        .02em;
  --db-ls-wide:          .06em;
  --db-ls-ultra:         .14em;

  /* ── Spacing scale (8px base) ───────────────────────────── */
  --db-sp-1:             4px;
  --db-sp-2:             8px;
  --db-sp-3:             12px;
  --db-sp-4:             16px;
  --db-sp-5:             20px;
  --db-sp-6:             24px;
  --db-sp-7:             28px;
  --db-sp-8:             36px;
  --db-sp-9:             44px;
  --db-sp-10:            48px;
  --db-sp-11:            52px;
  --db-sp-12:            56px;
  --db-sp-13:            60px;
  --db-sp-14:            72px;
  --db-sp-15:            88px;

  /* ── Radii ──────────────────────────────────────────────── */
  --db-radius-sm:        9px;
  --db-radius-md:        14px;
  --db-radius-lg:        16px;
  --db-radius-pill:      50px;
  --db-radius-circle:    50%;

  /* ── Shadows ────────────────────────────────────────────── */
  --db-shadow-sm:        0 6px 22px rgba(0, 0, 0, .30);
  --db-shadow-md:        0 8px 28px rgba(0, 0, 0, .40);
  --db-shadow-lg:        0 16px 48px rgba(0, 0, 0, .55);
  --db-shadow-xl:        0 20px 60px rgba(0, 0, 0, .45);

  --db-shadow-orange:    0 8px 28px rgba(255, 106, 0, .40);
  --db-shadow-orange-hi: 0 14px 38px rgba(255, 106, 0, .52);
  --db-shadow-green:     0 6px 22px rgba(37, 211, 102, .30);
  --db-shadow-green-hi:  0 10px 30px rgba(37, 211, 102, .46);

  /* ── Transitions ────────────────────────────────────────── */
  --db-ease-out:         .22s ease;
  --db-ease-smooth:      .3s ease;

  /* ── Layout ─────────────────────────────────────────────── */
  --db-max-width:        1160px;
  --db-grid-gap:         60px;
}