/* NextDGT — colors_and_type.css
 * Source-of-truth tokens for the NextDGT brand.
 * Brand spec: Renk-NextDGT.pdf, Tipografi-NextDGT.pdf
 * Production reference: SiKolektive/NextDGTWebSite css/main.css, BizzDGT/app-stack shared/theme.js
 */

@font-face {
  font-family: "Alliance No.2";
  src: url("./fonts/AllianceNo.2-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0-12F, U+131-10FFFF;
}
@font-face {
  font-family: "Alliance No.2";
  src: url("./fonts/AllianceNo.2-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0-12F, U+131-10FFFF;
}
@font-face {
  font-family: "Alliance No.2";
  src: url("./fonts/AllianceNo.2-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0-12F, U+131-10FFFF;
}
@font-face {
  font-family: "Alliance No.2";
  src: url("./fonts/AllianceNo.2-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0-12F, U+131-10FFFF;
}

:root {
  /* ============================================================
   * BRAND COLORS  — from Renk-NextDGT.pdf (official guideline)
   * ============================================================ */
  --ndgt-yellow:        #F4DC50; /* primary brand color */
  --ndgt-yellow-bright: #FFE85A; /* hover/active highlight */
  --ndgt-yellow-soft:   #FFF1A6; /* tint for callouts on dark */
  --ndgt-black:         #000000; /* primary brand surface */
  --ndgt-black-warm:    #0A0907; /* slightly warmed page bg */
  --ndgt-black-tint:    #1E1A14; /* near-black brown (gradient stop 1) */

  /* Gold gradient ramp — for type, accents, hero gradients */
  --ndgt-gold-1: #37280B;
  --ndgt-gold-2: #533D15;
  --ndgt-gold-3: #856515;
  --ndgt-gold-4: #A57C16;
  --ndgt-gold-5: #CCAA00;
  --ndgt-gold-6: #F4DC50;
  --ndgt-gradient: linear-gradient(135deg,
    #1E1A14 0%,
    #37280B 18%,
    #533D15 35%,
    #856515 52%,
    #A57C16 68%,
    #CCAA00 84%,
    #F4DC50 100%
  );
  --ndgt-gradient-warm: linear-gradient(180deg, #F4DC50 0%, #A57C16 100%);

  /* ============================================================
   * NEUTRAL SCALE — extends brand black for UI surfaces
   * ============================================================ */
  --ndgt-ink-0:   #000000;
  --ndgt-ink-1:   #0A0907;
  --ndgt-ink-2:   #141414;  /* base, matches NextDGTWebSite --base */
  --ndgt-ink-3:   #1E1A14;  /* tinted black */
  --ndgt-ink-4:   #242424;  /* base-tint */
  --ndgt-ink-5:   #2E2A22;
  --ndgt-ink-6:   #535762;  /* stroke-elements */
  --ndgt-ink-7:   #797D83;
  --ndgt-ink-8:   #AEB5C5;  /* t-medium */
  --ndgt-ink-9:   #E6E8EE;
  --ndgt-ink-10:  #F2F5FC;  /* t-bright */
  --ndgt-paper:   #FFFFFF;
  --ndgt-paper-soft: #F7F6F2; /* warm paper tint, complements yellow */

  /* ============================================================
   * SEMANTIC COLORS — minimal, for app surfaces (BizzDGT)
   * Carried over from app-stack/shared/theme.js, retuned for dark
   * ============================================================ */
  --ndgt-success: #16A34A;
  --ndgt-success-bg: rgba(22, 163, 74, 0.12);
  --ndgt-warning: #D97706;
  --ndgt-warning-bg: rgba(217, 119, 6, 0.14);
  --ndgt-danger:  #DC2626;
  --ndgt-danger-bg: rgba(220, 38, 38, 0.14);
  --ndgt-info:    #0891B2;
  --ndgt-info-bg: rgba(8, 145, 178, 0.14);

  /* ============================================================
   * SEMANTIC TOKENS  — what the rest of the design system reads
   * Default: DARK theme (the brand's home)
   * ============================================================ */
  --ndgt-bg:           var(--ndgt-ink-1);
  --ndgt-bg-elevated:  var(--ndgt-ink-3);
  --ndgt-bg-card:      var(--ndgt-ink-2);
  --ndgt-bg-overlay:   rgba(0, 0, 0, 0.72);

  --ndgt-fg:           var(--ndgt-ink-10); /* primary body */
  --ndgt-fg-muted:     var(--ndgt-ink-8);
  --ndgt-fg-subtle:    var(--ndgt-ink-7);
  --ndgt-fg-on-yellow: var(--ndgt-ink-0);

  --ndgt-stroke:       var(--ndgt-ink-6);
  --ndgt-stroke-soft:  rgba(242, 245, 252, 0.10);
  --ndgt-stroke-strong: var(--ndgt-ink-10);

  --ndgt-accent:       var(--ndgt-yellow);
  --ndgt-accent-fg:    var(--ndgt-ink-0);
  --ndgt-link:         var(--ndgt-yellow);

  /* ============================================================
   * TYPOGRAPHY
   * Brand spec calls for Alliance No.2 (display)
   * Mono fallback only used in product app surfaces (code, tables)
   * ============================================================ */
  --ndgt-font-display: "Alliance No.2", "Inter", system-ui, sans-serif;
  --ndgt-font-body:    "Alliance No.2", "Inter", system-ui, sans-serif;
  --ndgt-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ndgt-weight-light: 300;
  --ndgt-weight-regular: 400;
  --ndgt-weight-semibold: 600;
  --ndgt-weight-bold: 700;

  /* Tracking — Alliance reads slightly tight; loosen on display */
  --ndgt-tracking-display: -0.025em;
  --ndgt-tracking-tight:   -0.012em;
  --ndgt-tracking-normal:  0;
  --ndgt-tracking-wide:    0.06em;   /* small caps / eyebrows */
  --ndgt-tracking-wider:   0.14em;   /* [BRACKETED LABELS] */

  /* Type scale — display-first. Use unitless line-heights */
  --ndgt-fs-display:   clamp(56px, 8vw, 160px);  /* H1 hero */
  --ndgt-fs-h1:        clamp(44px, 5.5vw, 96px);
  --ndgt-fs-h2:        clamp(36px, 4vw,   72px);
  --ndgt-fs-h3:        clamp(28px, 3vw,   48px);
  --ndgt-fs-h4:        clamp(22px, 2vw,   32px);
  --ndgt-fs-h5:        20px;
  --ndgt-fs-h6:        16px;
  --ndgt-fs-lead:      22px;
  --ndgt-fs-body:      16px;
  --ndgt-fs-small:     14px;
  --ndgt-fs-eyebrow:   12px;

  --ndgt-lh-display:   0.95;
  --ndgt-lh-tight:     1.08;
  --ndgt-lh-snug:      1.2;
  --ndgt-lh-normal:    1.4;
  --ndgt-lh-relaxed:   1.6;

  /* ============================================================
   * SPACING / RADIUS / SHADOW / MOTION
   * ============================================================ */
  --ndgt-space-1: 4px;
  --ndgt-space-2: 8px;
  --ndgt-space-3: 12px;
  --ndgt-space-4: 16px;
  --ndgt-space-5: 24px;
  --ndgt-space-6: 32px;
  --ndgt-space-7: 48px;
  --ndgt-space-8: 64px;
  --ndgt-space-9: 96px;
  --ndgt-space-10: 128px;

  --ndgt-radius-xs:  4px;
  --ndgt-radius-sm:  8px;
  --ndgt-radius-md:  12px;
  --ndgt-radius-lg:  20px;
  --ndgt-radius-xl:  28px;
  --ndgt-radius-pill: 999px;

  --ndgt-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --ndgt-shadow-md: 0 6px 18px rgba(0,0,0,0.45);
  --ndgt-shadow-lg: 0 20px 60px rgba(0,0,0,0.55);
  --ndgt-glow-yellow: 0 0 0 1px rgba(244,220,80,0.35), 0 12px 32px rgba(244,220,80,0.18);
  --ndgt-inset-stroke: inset 0 0 0 1px var(--ndgt-stroke-soft);

  --ndgt-ease:        cubic-bezier(0.23, 0.65, 0.74, 1.09); /* matches main.css */
  --ndgt-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ndgt-dur-fast:    120ms;
  --ndgt-dur-med:     280ms;
  --ndgt-dur-slow:    600ms;

  /* ============================================================
   * SEMANTIC TYPE STYLES — use these in components
   * ============================================================ */
}

/* Light surface override (rare — promo materials, paper print) */
[data-ndgt-theme="light"] {
  --ndgt-bg:           var(--ndgt-paper);
  --ndgt-bg-elevated:  var(--ndgt-paper-soft);
  --ndgt-bg-card:      #FFFFFF;
  --ndgt-fg:           var(--ndgt-ink-1);
  --ndgt-fg-muted:     #44474A;
  --ndgt-fg-subtle:    #797D83;
  --ndgt-stroke:       #D8DDE7;
  --ndgt-stroke-soft:  rgba(0,0,0,0.08);
  --ndgt-fg-on-yellow: var(--ndgt-ink-0);
}

/* ============================================================
 * SEMANTIC ELEMENT STYLES
 * Apply globally or scope to .ndgt-prose
 * ============================================================ */
.ndgt-display, .ndgt-h0 {
  font-family: var(--ndgt-font-display);
  font-weight: var(--ndgt-weight-light);
  font-size: var(--ndgt-fs-display);
  line-height: var(--ndgt-lh-display);
  letter-spacing: var(--ndgt-tracking-display);
  color: var(--ndgt-fg);
}
.ndgt-h1 {
  font-family: var(--ndgt-font-display);
  font-weight: var(--ndgt-weight-light);
  font-size: var(--ndgt-fs-h1);
  line-height: var(--ndgt-lh-tight);
  letter-spacing: var(--ndgt-tracking-tight);
  color: var(--ndgt-fg);
}
.ndgt-h2 {
  font-family: var(--ndgt-font-display);
  font-weight: var(--ndgt-weight-regular);
  font-size: var(--ndgt-fs-h2);
  line-height: var(--ndgt-lh-tight);
  letter-spacing: var(--ndgt-tracking-tight);
  color: var(--ndgt-fg);
}
.ndgt-h3 {
  font-family: var(--ndgt-font-display);
  font-weight: var(--ndgt-weight-semibold);
  font-size: var(--ndgt-fs-h3);
  line-height: var(--ndgt-lh-snug);
  letter-spacing: var(--ndgt-tracking-tight);
  color: var(--ndgt-fg);
}
.ndgt-h4 {
  font-family: var(--ndgt-font-display);
  font-weight: var(--ndgt-weight-semibold);
  font-size: var(--ndgt-fs-h4);
  line-height: var(--ndgt-lh-snug);
  color: var(--ndgt-fg);
}
.ndgt-lead {
  font-family: var(--ndgt-font-body);
  font-weight: var(--ndgt-weight-regular);
  font-size: var(--ndgt-fs-lead);
  line-height: var(--ndgt-lh-relaxed);
  color: var(--ndgt-fg-muted);
}
.ndgt-body, .ndgt-p {
  font-family: var(--ndgt-font-body);
  font-weight: var(--ndgt-weight-regular);
  font-size: var(--ndgt-fs-body);
  line-height: var(--ndgt-lh-relaxed);
  color: var(--ndgt-fg);
}
.ndgt-small {
  font-size: var(--ndgt-fs-small);
  line-height: var(--ndgt-lh-normal);
  color: var(--ndgt-fg-muted);
}
.ndgt-eyebrow {
  font-family: var(--ndgt-font-body);
  font-weight: var(--ndgt-weight-semibold);
  font-size: var(--ndgt-fs-eyebrow);
  line-height: 1;
  letter-spacing: var(--ndgt-tracking-wider);
  text-transform: uppercase;
  color: var(--ndgt-yellow);
}
/* Bracketed eyebrow — distinctive brand voice device */
.ndgt-bracket::before { content: "[ "; color: var(--ndgt-yellow); }
.ndgt-bracket::after  { content: " ]"; color: var(--ndgt-yellow); }

.ndgt-mono {
  font-family: var(--ndgt-font-mono);
  font-feature-settings: "tnum";
}

/* Color-of-NEXT highlight — wrap NEXT or other emphasized words to recolor yellow */
.ndgt-mark {
  color: var(--ndgt-yellow);
}
.ndgt-mark-grad {
  background: var(--ndgt-gradient-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}