/*
 * Gründersjekk brand tokens
 * Source of truth for colors, typography, spacing
 * Locked 2026-04-19 (Lunour playbook Pillar 1–4)
 * Palette: Midnatt marine + bone + korall
 */

:root {
  /* ============ COLOR ============ */
  /* Core palette — navy */
  --gs-navy-900: #0e1626;
  --gs-navy-800: #1b2845; /* primary */
  --gs-navy-700: #2a3a5c;
  --gs-navy-100: #d7dde8;
  --gs-navy-50: #eceff5;

  /* Core palette — bone */
  --gs-bone-200: #e8dfcc;
  --gs-bone-100: #f4ede1; /* page background */
  --gs-bone-50: #faf6ec;

  /* Core palette — coral */
  --gs-coral-800: #b8543c;
  --gs-coral-600: #e87a5d; /* accent / CTA */
  --gs-coral-400: #f0a18a;
  --gs-coral-100: #fadfd4;

  /* Core palette — ink */
  --gs-ink-900: #14181f;
  --gs-ink-600: #44485a;
  --gs-ink-400: #7e8193;
  --gs-ink-200: #ced1d9;

  --gs-white: #ffffff;

  /* Semantic roles */
  --gs-bg: var(--gs-bone-100);
  --gs-bg-raised: var(--gs-bone-50);
  --gs-bg-invert: var(--gs-navy-800);

  --gs-text: var(--gs-ink-900);
  --gs-text-muted: var(--gs-ink-600);
  --gs-text-faint: var(--gs-ink-400);
  --gs-text-invert: var(--gs-bone-50);
  /* Inverted text on dark backgrounds (sidebar, dark cards) */
  --gs-text-invert-muted: rgba(244, 237, 225, 0.7);
  --gs-text-invert-faint: rgba(244, 237, 225, 0.5);

  --gs-primary: var(--gs-navy-800);
  --gs-primary-hover: var(--gs-navy-900);
  --gs-accent: var(--gs-coral-600);
  --gs-accent-hover: var(--gs-coral-800);
  /* Status — semantic green derived from rgba(31, 107, 77, ...) usage in
     portal-v2.css (.deliv-card.complete border + icon background). */
  --gs-success: #1f6b4d;
  --gs-success-bg: rgba(31, 107, 77, 0.08);

  --gs-border: var(--gs-ink-200);
  --gs-border-strong: var(--gs-ink-400);
  /* Border on dark backgrounds */
  --gs-border-invert: rgba(244, 237, 225, 0.15);

  /* ============ TYPOGRAPHY ============ */
  --gs-font-serif: "Fraunces", "Times New Roman", Georgia, serif;
  --gs-font-sans:
    "Geist", system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  --gs-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (modular, 1.25 ratio anchored at 16px) */
  --gs-text-xs: 0.75rem; /* 12 */
  --gs-text-sm: 0.875rem; /* 14 */
  --gs-text-base: 1rem; /* 16 */
  --gs-text-lg: 1.125rem; /* 18 */
  --gs-text-xl: 1.375rem; /* 22 */
  --gs-text-2xl: 1.75rem; /* 28 */
  --gs-text-3xl: 2.25rem; /* 36 */
  --gs-text-4xl: 3rem; /* 48 */
  --gs-text-5xl: 4rem; /* 64 */
  --gs-text-6xl: 5.25rem; /* 84 */

  /* Line heights */
  --gs-leading-tight: 1.1;
  --gs-leading-snug: 1.25;
  --gs-leading-body: 1.55;
  --gs-leading-loose: 1.75;

  /* Letter spacing */
  --gs-tracking-tight: -0.02em;
  --gs-tracking-snug: -0.01em;
  --gs-tracking-normal: 0;
  --gs-tracking-wide: 0.04em;

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

  /* ============ RADIUS ============ */
  --gs-radius-sm: 4px;
  --gs-radius-md: 8px;
  --gs-radius-lg: 14px;
  --gs-radius-xl: 22px;
  --gs-radius-pill: 999px;

  /* ============ SHADOWS ============ */
  --gs-shadow-sm: 0 1px 2px rgba(14, 22, 38, 0.06);
  --gs-shadow-md: 0 4px 14px rgba(14, 22, 38, 0.08);
  --gs-shadow-lg: 0 14px 40px rgba(14, 22, 38, 0.14);

  /* ============ MOTION ============ */
  --gs-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --gs-duration-fast: 120ms;
  --gs-duration-base: 200ms;
  --gs-duration-slow: 400ms;
}

/* ============ BUTTON (MVP) ============ */
.gs-btn {
  --_bg: var(--gs-primary);
  --_fg: var(--gs-text-invert);
  --_border: var(--gs-primary);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gs-space-2);
  padding: 0.875rem 1.5rem;
  font-family: var(--gs-font-sans);
  font-size: var(--gs-text-base);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--gs-tracking-snug);
  color: var(--_fg);
  background: var(--_bg);
  border: 1.5px solid var(--_border);
  border-radius: var(--gs-radius-md);
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--gs-duration-fast) var(--gs-ease),
    background var(--gs-duration-base) var(--gs-ease),
    color var(--gs-duration-base) var(--gs-ease),
    border-color var(--gs-duration-base) var(--gs-ease);
}

.gs-btn:hover {
  --_bg: var(--gs-primary-hover);
  --_border: var(--gs-primary-hover);
  transform: translateY(-1px);
}

.gs-btn:active {
  transform: translateY(0);
}

.gs-btn:focus-visible {
  outline: 2px solid var(--gs-accent);
  outline-offset: 3px;
}

.gs-btn--accent {
  --_bg: var(--gs-accent);
  --_border: var(--gs-accent);
  --_fg: var(--gs-white);
}
.gs-btn--accent:hover {
  --_bg: var(--gs-accent-hover);
  --_border: var(--gs-accent-hover);
}

.gs-btn--secondary {
  --_bg: transparent;
  --_fg: var(--gs-primary);
  --_border: var(--gs-primary);
}
.gs-btn--secondary:hover {
  --_bg: var(--gs-navy-50);
  --_border: var(--gs-primary);
}

.gs-btn--ghost {
  --_bg: transparent;
  --_fg: var(--gs-primary);
  --_border: transparent;
  padding: 0.75rem 1rem;
}
.gs-btn--ghost:hover {
  --_bg: var(--gs-navy-50);
}

.gs-btn--lg {
  padding: 1.125rem 1.875rem;
  font-size: var(--gs-text-lg);
}
.gs-btn--sm {
  padding: 0.625rem 1rem;
  font-size: var(--gs-text-sm);
}