/* =============================================================================
   QUOTR DESIGN TOKENS
   Quotr.dk · Håndværker Tilbud · FairByggePris ApS
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@500&display=swap');

:root {
  /* -------------------------------------------------------------------------
     BRAND  — Orange (Tailwind orange-500/600)
     ------------------------------------------------------------------------- */
  --brand:        #f97316;   /* orange-500 — primary actions, accents, links */
  --brand-dark:   #ea580c;   /* orange-600 — hover, pressed primary */
  --brand-darker: #c2410c;   /* orange-700 — text on tinted background */
  --brand-light:  #fff7ed;   /* orange-50  — soft tint background */
  --brand-tint:   #fed7aa;   /* orange-200 — borders on tinted cards */
  --brand-tint-2: #fdba74;   /* orange-300 — secondary border */
  --brand-soft:   #fff7ed;   /* alias for brand-light */

  /* -------------------------------------------------------------------------
     NEUTRALS — Zinc scale (the neutral system across product + marketing)
     ------------------------------------------------------------------------- */
  --zinc-50:   #fafafa;
  --zinc-100:  #f4f4f5;     /* page-bg, gray surfaces */
  --zinc-200:  #e4e4e7;     /* hairlines, borders */
  --zinc-300:  #d4d4d8;
  --zinc-400:  #a1a1aa;     /* text-muted, sidebar-text */
  --zinc-500:  #71717a;     /* text-secondary */
  --zinc-600:  #52525b;     /* footer copy on dark */
  --zinc-700:  #3f3f46;     /* sidebar-border-dark */
  --zinc-800:  #27272a;     /* dark-2 — elevated dark surface */
  --zinc-900:  #18181b;     /* sidebar-bg, primary text */
  --zinc-950:  #09090b;     /* footer pure-dark */

  /* -------------------------------------------------------------------------
     SEMANTIC — Foreground / Background / Borders
     ------------------------------------------------------------------------- */
  --fg-1:        var(--zinc-900);   /* primary text */
  --fg-2:        var(--zinc-500);   /* secondary text, sub copy */
  --fg-3:        var(--zinc-400);   /* muted, helper text */
  --fg-on-dark:  #ffffff;
  --fg-on-brand: #ffffff;

  --bg-page:     #ffffff;            /* primary marketing surface */
  --bg-app:      var(--zinc-100);    /* app shell background */
  --bg-card:     #ffffff;            /* card surface */
  --bg-tint:     var(--brand-light); /* highlight bg */
  --bg-dark:     var(--zinc-900);    /* sidebar / dark hero */
  --bg-dark-2:   var(--zinc-800);    /* elevated dark surface */
  --bg-darkest:  var(--zinc-950);    /* footer */

  --border:      var(--zinc-200);    /* default border / hairline */
  --border-strong: var(--zinc-400);
  --border-dark:  var(--zinc-700);   /* on dark surfaces */
  --border-onDark: rgba(255,255,255,0.10);

  /* Sidebar-specific */
  --sidebar-bg:          var(--zinc-900);
  --sidebar-text:        var(--zinc-400);
  --sidebar-text-active: #ffffff;
  --sidebar-item-active: rgba(255,255,255,0.08);

  /* -------------------------------------------------------------------------
     STATUS / SEMANTIC FEEDBACK
     ------------------------------------------------------------------------- */
  --success-bg:    #f0fdf4;  --success-border: #bbf7d0;  --success-fg: #166534;
  --info-bg:       #eff6ff;  --info-border:    #bfdbfe;  --info-fg:    #1d4ed8;  --info-soft: #dbeafe;
  --warn-bg:       #fffbeb;  --warn-border:    #fde68a;  --warn-fg:    #92400e;
  --danger-bg:     #fef2f2;  --danger-border:  #fecaca;  --danger-fg:  #991b1b;
  --danger:        #ef4444;

  --status-draft-bg:     rgba(249,115,22,0.08);
  --status-draft-border: rgba(249,115,22,0.30);
  --status-draft-fg:     var(--brand);
  --status-sent-bg:      #eff6ff;  --status-sent-fg:    #2563eb;
  --status-accepted-bg:  #dcfce7;  --status-accepted-fg:#15803d;
  --status-rejected-bg:  #fee2e2;  --status-rejected-fg:#b91c1c;
  --status-expired-bg:   #f4f4f5;  --status-expired-fg: #71717a;

  /* -------------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------------- */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-app:     'Geist', -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-display:  clamp(38px, 6.5vw, 68px);
  --fs-h1:       clamp(28px, 4.4vw, 44px);
  --fs-h2:       clamp(26px, 4vw, 40px);
  --fs-h3:       18px;
  --fs-h4:       16px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  13px;
  --fs-eyebrow:  12px;
  --fs-tag:      11px;

  --lh-tight:    1.05;
  --lh-snug:     1.15;
  --lh-normal:   1.5;
  --lh-relaxed:  1.75;

  --tracking-tight:  -0.035em;
  --tracking-snug:   -0.025em;
  --tracking-normal: -0.01em;
  --tracking-wide:   0.05em;
  --tracking-eyebrow:0.10em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-heavy:   800;
  --weight-black:   900;

  /* -------------------------------------------------------------------------
     SPACING / RADIUS / SHADOW
     ------------------------------------------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-pill:  100px;
  --radius-full:  9999px;

  --shadow-xs:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:    0 2px 6px rgba(0,0,0,0.05);
  --shadow-card:  0 8px 24px rgba(0,0,0,0.06);
  --shadow-lift:  0 10px 32px rgba(0,0,0,0.07);
  --shadow-pop:   0 12px 36px rgba(0,0,0,0.08);
  --shadow-modal: 0 32px 80px rgba(0,0,0,0.22);
  --shadow-brand: 0 16px 48px rgba(249,115,22,0.12);
  --shadow-brand-lift: 0 20px 56px rgba(249,115,22,0.16);
  --shadow-focus: 0 0 0 2px rgba(249,115,22,0.20);

  /* -------------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------------- */
  --ease:           ease;
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  0.15s;
  --duration-base:  0.20s;
  --duration-slow:  0.30s;

  /* -------------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------------- */
  --container-narrow: 760px;
  --container-mid:    1060px;
  --container-wide:   1160px;
  --nav-height:       52px;
  --app-header:       56px;
  --app-sidebar:      240px;
  --app-sidebar-collapsed: 56px;
}

/* =============================================================================
   SEMANTIC TYPE STYLES
   ============================================================================= */

.q-display {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.q-display em { font-style: normal; color: var(--brand); }

.q-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.q-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.q-h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: var(--tracking-normal);
  color: var(--fg-1);
}

.q-h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h4);
  line-height: 1.35;
  color: var(--fg-1);
}

.q-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.q-body-sm {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--fs-body-sm);
  line-height: 1.65;
  color: var(--fg-2);
}

.q-caption {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--fs-caption);
  color: var(--fg-3);
}

.q-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--brand);
}

.q-stat {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 36px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--brand);
}

.q-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}