/* ==========================================================================
   Design System — Airtable-inspired (DESIGN.md strict)
   Fonts: Syne (Display) | DM Sans (Body/UI) | Fira Code (Mono)
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties — Semantic Tokens
   -------------------------------------------------------------------------- */

:root {
  /* --- Core Palette --- */
  --color-deep-navy:        #181d26;
  --color-airtable-blue:    #1b61c9;
  --color-mid-blue:         #254fad;
  --color-white:            #ffffff;
  --color-success:          #006400;
  --color-border:           #e0e2e6;
  --color-surface-subtle:   #f8fafc;
  --color-dark-gray:        #333333;

  /* --- Semantic Theme Tokens (DESIGN.md §2) --- */
  --theme_text-primary:              var(--color-deep-navy);
  --theme_text-weak:                 rgba(4, 14, 32, 0.69);
  --theme_text-weaker:               rgba(4, 14, 32, 0.45);
  --theme_bg-canvas:                 var(--color-white);
  --theme_bg-surface:                var(--color-surface-subtle);
  --theme_cta:                       var(--color-airtable-blue);
  --theme_cta-hover:                 var(--color-mid-blue);
  --theme_border:                    var(--color-border);
  --theme_success-text:              var(--color-success);
  --theme_button-text-spotlight:     rgba(249, 252, 255, 0.97);
  --theme_button-text-secondary-active: rgba(7, 12, 20, 0.82);

  /* --- Shadow System (DESIGN.md §6) --- */
  --theme_shadow-blue:
    rgba(0, 0, 0, 0.32) 0px 0px 1px,
    rgba(0, 0, 0, 0.08) 0px 0px 2px,
    rgba(45, 127, 249, 0.28) 0px 1px 3px,
    rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px inset;
  --theme_shadow-soft:
    rgba(15, 48, 106, 0.05) 0px 0px 20px;
  --theme_shadow-blue-hover:
    rgba(0, 0, 0, 0.24) 0px 0px 1px,
    rgba(0, 0, 0, 0.10) 0px 2px 6px,
    rgba(45, 127, 249, 0.36) 0px 4px 12px;
  --theme_shadow-nav:
    rgba(45, 127, 249, 0.12) 0px 1px 0px;

  /* --- Border Radius (DESIGN.md §5) --- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-btn:  12px;
  --radius-card: 16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-full: 50%;

  /* --- Spacing (8px 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;

  /* --- Typography — Font Families --- */
  --font-display: 'Syne', -apple-system, system-ui, sans-serif;
  --font-body:    'DM Sans', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --font-mono:    'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;

  /* --- Typography — Sizes (DESIGN.md §3 adapted for Syne/DM Sans) --- */
  --text-hero:     clamp(40px, 6vw, 72px);
  --text-display:  clamp(32px, 4.5vw, 56px);
  --text-h2:       clamp(28px, 3vw, 40px);
  --text-h3:       clamp(22px, 2.5vw, 32px);
  --text-card:     22px;
  --text-feature:  20px;
  --text-body:     18px;
  --text-body-md:  16px;
  --text-btn:      16px;
  --text-caption:  14px;
  --text-mono:     13px;

  /* --- Letter Spacing (DESIGN.md §3 positive tracking) --- */
  --tracking-tight:   -0.5px;
  --tracking-display: normal;
  --tracking-body:    0.18px;
  --tracking-md:      0.12px;
  --tracking-caption: 0.28px;
  --tracking-mono:    0.08px;

  /* --- Line Heights --- */
  --leading-hero:   1.10;
  --leading-h2:     1.25;
  --leading-body:   1.55;
  --leading-card:   1.35;
  --leading-tight:  1.15;

  /* --- Transitions --- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-base:   220ms;
  --duration-slow:   400ms;
  --duration-enter:  600ms;
}

/* --------------------------------------------------------------------------
   Modern CSS Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-body);
  color: var(--theme_text-primary);
  background-color: var(--theme_bg-canvas);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

a {
  color: var(--theme_cta);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}

a:hover {
  color: var(--theme_cta-hover);
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* --------------------------------------------------------------------------
   Typography Utilities
   -------------------------------------------------------------------------- */

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

/* Text colors */
.text-primary { color: var(--theme_text-primary); }
.text-weak    { color: var(--theme_text-weak); }
.text-weaker  { color: var(--theme_text-weaker); }
.text-cta     { color: var(--theme_cta); }

/* Text sizes */
.text-hero    { font-size: var(--text-hero); }
.text-display { font-size: var(--text-display); }
.text-h2      { font-size: var(--text-h2); }
.text-h3      { font-size: var(--text-h3); }
.text-body    { font-size: var(--text-body); }
.text-caption { font-size: var(--text-caption); }
.text-mono    { font-size: var(--text-mono); }

/* Text weights */
.weight-regular { font-weight: 400; }
.weight-medium  { font-weight: 500; }
.weight-semibold { font-weight: 600; }
.weight-bold    { font-weight: 700; }
.weight-extrabold { font-weight: 800; }

/* Letter spacing */
.tracking-tight   { letter-spacing: var(--tracking-tight); }
.tracking-display { letter-spacing: var(--tracking-display); }
.tracking-body    { letter-spacing: var(--tracking-body); }
.tracking-caption { letter-spacing: var(--tracking-caption); }

/* --------------------------------------------------------------------------
   Selection
   -------------------------------------------------------------------------- */

::selection {
  background-color: rgba(27, 97, 201, 0.15);
  color: var(--color-deep-navy);
}

/* --------------------------------------------------------------------------
   Focus Ring
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--theme_cta);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Skip Link (accessibility)
   -------------------------------------------------------------------------- */

.skip-link {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background-color: var(--theme_cta);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-4)));
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Scrollbar (subtle)
   -------------------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--theme_bg-canvas);
}

::-webkit-scrollbar-thumb {
  background: var(--theme_border);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(27, 97, 201, 0.4);
}