/* ============================================================
   NORD CONSTRUCT BUCOVINA — Design Tokens
   ============================================================ */

:root {
  /* ── Colors ───────────────────────────────────────────── */
  --color-bg-primary:        #f7f5f3;
  --color-bg-secondary:      #ffffff;
  --color-bg-tertiary:       #edeae6;
  --color-bg-inverse:        #0a0a0a;
  --color-text-primary:      #1c1917;
  --color-text-secondary:    #57534e;
  --color-text-tertiary:     #78716c;
  --color-text-inverse:      #fafaf9;
  --color-text-link:         #0a0a0a;
  --color-text-link-hover:   #d99e00;
  --color-border-primary:    #d6d3d1;
  --color-border-secondary:  #e7e5e4;
  --color-border-focus:      #f5b800;
  --color-accent-primary:         #f5b800;
  --color-accent-primary-hover:   #d99e00;
  --color-accent-primary-active:  #b88500;
  --color-accent-secondary:       #0a0a0a;
  --color-accent-secondary-hover: #1c1917;
  --color-status-success:    #15803d;
  --color-status-error:      #b91c1c;
  --color-surface-overlay:   rgba(10, 10, 10, 0.55);

  /* ── Spacing ──────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ── Typography ───────────────────────────────────────── */
  --font-family-display: "Barlow Semi Condensed", system-ui, sans-serif;
  --font-family-body:    "Source Sans 3", system-ui, sans-serif;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;
  --font-size-4xl:  2.25rem;
  --font-size-5xl:  clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --font-weight-normal:    400;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --line-height-tight:   1.15;
  --line-height-snug:    1.35;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.65;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide:   0.08em;

  /* ── Layout ───────────────────────────────────────────── */
  --max-width-content: 42rem;
  --max-width-wide:    72rem;
  --max-width-page:    80rem;
  --border-radius-sm:  4px;
  --border-radius-md:  6px;
  --border-radius-lg:  10px;
  --shadow-sm:   0 1px 2px rgba(28, 27, 25, 0.06);
  --shadow-md:   0 4px 12px rgba(28, 27, 25, 0.08);
  --shadow-lg:   0 12px 40px rgba(28, 27, 25, 0.12);
  --shadow-focus: 0 0 0 3px rgba(245, 184, 0, 0.45);

  /* ── Motion ───────────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-out:     cubic-bezier(0, 0, 0.2, 1);

  /* ── Component tokens ─────────────────────────────────── */
  --header-height: 5rem;
  --btn-padding-y:       0.75rem;
  --btn-padding-x:       1.25rem;
  --btn-font-size:       var(--font-size-sm);
  --btn-font-weight:     var(--font-weight-semibold);
  --btn-letter-spacing:  var(--letter-spacing-wide);
  --btn-radius:          var(--border-radius-sm);
  --input-padding-y:  0.65rem;
  --input-padding-x:  0.85rem;
  --input-border:     1px solid var(--color-border-primary);
  --input-radius:     var(--border-radius-sm);
  --card-padding:  var(--space-5);
  --card-radius:   var(--border-radius-md);
  --card-border:   1px solid var(--color-border-secondary);
}

/* ── Dark theme (explicit) ──────────────────────────────── */
[data-theme="dark"] {
  --color-bg-primary:        #0a0a0a;
  --color-bg-secondary:      #161513;
  --color-bg-tertiary:       #1f1d1b;
  --color-bg-inverse:        #fafaf9;
  --color-text-primary:      #f5f3f0;
  --color-text-secondary:    #a8a29e;
  --color-text-tertiary:     #78716c;
  --color-text-inverse:      #0a0a0a;
  --color-text-link:         #fbbf24;
  --color-text-link-hover:   #fcd34d;
  --color-border-primary:    #44403c;
  --color-border-secondary:  #292524;
  --color-border-focus:      #fbbf24;
  --color-accent-primary:         #fbbf24;
  --color-accent-primary-hover:   #fcd34d;
  --color-accent-primary-active:  #f5b800;
  --color-accent-secondary:       #f5f3f0;
  --color-accent-secondary-hover: #fafaf9;
  --color-surface-overlay:   rgba(0, 0, 0, 0.65);
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 0 0 3px rgba(251, 191, 36, 0.45);
  --card-border: 1px solid var(--color-border-primary);
}

/* ── Dark theme (OS preference) ─────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-primary:        #0a0a0a;
    --color-bg-secondary:      #161513;
    --color-bg-tertiary:       #1f1d1b;
    --color-bg-inverse:        #fafaf9;
    --color-text-primary:      #f5f3f0;
    --color-text-secondary:    #a8a29e;
    --color-text-tertiary:     #78716c;
    --color-text-inverse:      #0a0a0a;
    --color-text-link:         #fbbf24;
    --color-text-link-hover:   #fcd34d;
    --color-border-primary:    #44403c;
    --color-border-secondary:  #292524;
    --color-border-focus:      #fbbf24;
    --color-accent-primary:         #fbbf24;
    --color-accent-primary-hover:   #fcd34d;
    --color-accent-primary-active:  #f5b800;
    --color-accent-secondary:       #f5f3f0;
    --color-accent-secondary-hover: #fafaf9;
    --color-surface-overlay:   rgba(0, 0, 0, 0.65);
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.45);
    --shadow-focus: 0 0 0 3px rgba(251, 191, 36, 0.45);
    --card-border: 1px solid var(--color-border-primary);
  }
}