/* =========================================================================
   Sabine River Partners — Design Tokens
   -------------------------------------------------------------------------
   This file defines the design system primitives. Edit values here to
   re-skin the entire site. Tokens are exposed as CSS custom properties
   under :root so any stylesheet or component can consume them.

   After editing, see styleguide.html to verify changes.
   ========================================================================= */

:root {
  /* -----------------------------------------------------------------------
     Color — Brand
     Primary blue is sampled from the SRP logo.
     ----------------------------------------------------------------------- */
  --color-brand-500: #1e73be;        /* primary blue, logo */
  --color-brand-600: #185d99;        /* hover / active */
  --color-brand-700: #134973;        /* deep accent */
  --color-brand-100: #e6f0f8;        /* tint, panel backgrounds */
  --color-brand-050: #f3f7fb;        /* subtle tint */

  --color-ink-900: #1f2a33;          /* logo wordmark color, primary text */
  --color-ink-700: #3a4853;          /* secondary text */
  --color-ink-500: #5f6e7a;          /* tertiary text, captions */
  --color-ink-300: #aab4bd;          /* muted, disabled */

  --color-line: #e3e8ed;             /* hairline borders */
  --color-line-strong: #c9d2db;

  --color-bg: #ffffff;               /* page background */
  --color-bg-alt: #f7f9fb;           /* alternating section background */
  --color-bg-dark: #1f2a33;          /* dark sections / footer */
  --color-bg-dark-2: #16202a;        /* darker still */

  /* Functional accents (used sparingly) */
  --color-accent-warm: #d97757;      /* CTA accent reserved for emphasis */
  --color-success: #2f7d5a;
  --color-danger:  #b3322b;

  /* Aliases — components reference these, not the raw scale */
  --color-text:        var(--color-ink-900);
  --color-text-muted:  var(--color-ink-500);
  --color-text-soft:   var(--color-ink-700);
  --color-text-on-dark: #f4f7fa;
  --color-text-on-dark-muted: #b6c2cc;
  --color-link:        var(--color-brand-600);
  --color-link-hover:  var(--color-brand-700);
  --color-surface:     var(--color-bg);
  --color-surface-alt: var(--color-bg-alt);
  --color-surface-dark: var(--color-bg-dark);

  /* -----------------------------------------------------------------------
     Type
     System font stack by default — easy to swap to a webfont here.
     ----------------------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Type scale — modular, ~1.2 ratio at the small end, larger at display */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  60px;

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.14em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* -----------------------------------------------------------------------
     Spacing — 4px base
     ----------------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Vertical rhythm for sections */
  --section-y: clamp(64px, 9vw, 120px);

  /* -----------------------------------------------------------------------
     Layout
     ----------------------------------------------------------------------- */
  --container-narrow: 720px;
  --container-base:   1080px;
  --container-wide:   1240px;
  --gutter: clamp(20px, 4vw, 40px);

  /* -----------------------------------------------------------------------
     Radius
     ----------------------------------------------------------------------- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* -----------------------------------------------------------------------
     Elevation
     ----------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(31, 42, 51, 0.06),
               0 1px 1px rgba(31, 42, 51, 0.04);
  --shadow-md: 0 4px 12px rgba(31, 42, 51, 0.08),
               0 2px 4px rgba(31, 42, 51, 0.04);
  --shadow-lg: 0 12px 32px rgba(31, 42, 51, 0.10),
               0 4px 8px  rgba(31, 42, 51, 0.04);

  /* -----------------------------------------------------------------------
     Motion
     ----------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* -----------------------------------------------------------------------
     Z-index
     ----------------------------------------------------------------------- */
  --z-header: 50;
  --z-overlay: 100;
}