/* =========================================================
   jlittrell.com — Discover-style editorial feed
   Design system: Dark editorial. Navy + cream + coral + green.
   ========================================================= */

:root {
  /* Type scale (fluid) */
  --text-xs:    clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:    clamp(0.8125rem,0.78rem + 0.2vw,  0.9375rem);
  --text-base:  clamp(1rem,     0.95rem + 0.25vw, 1.0625rem);
  --text-md:    clamp(1.0625rem,1rem    + 0.4vw,  1.1875rem);
  --text-lg:    clamp(1.25rem,  1.1rem  + 0.6vw,  1.625rem);
  --text-xl:    clamp(1.5rem,   1.2rem  + 1.2vw,  2.25rem);
  --text-2xl:   clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-hero:  clamp(2.5rem,   1.2rem  + 4vw,    5rem);

  /* Spacing (4px base) */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem;
  --space-4: 1rem;   --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;   --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;  --space-20: 5rem;   --space-24: 6rem;
  --space-32: 8rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-full: 9999px;

  /* Transitions */
  --t-fast: 160ms cubic-bezier(.16,1,.3,1);
  --t-med:  280ms cubic-bezier(.16,1,.3,1);
  --t-slow: 520ms cubic-bezier(.16,1,.3,1);

  /* Layout widths */
  --content-narrow: 720px;
  --content-default: 1080px;
  --content-wide: 1320px;

  /* Fonts */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Brand palette (Jason's established) */
  --jl-navy:   #07223d;
  --jl-navy-2: #0a2a4a;
  --jl-navy-3: #0e3458;
  --jl-cream:  #f4ecdc;
  --jl-coral:  #eb4171;
  --jl-green:  #52ca28;
  --jl-grey:   #2a2a2a;
}

/* DARK (default) */
:root, [data-theme="dark"] {
  --color-bg:            #07223d;
  --color-bg-2:          #0a2a4a;
  --color-surface:       rgba(255,255,255,0.04);
  --color-surface-2:     rgba(255,255,255,0.07);
  --color-surface-hover: rgba(255,255,255,0.10);
  --color-divider:       rgba(244, 236, 220, 0.08);
  --color-border:        rgba(244, 236, 220, 0.14);
  --color-border-strong: rgba(244, 236, 220, 0.28);

  --color-text:          #f4ecdc;
  --color-text-strong:   #ffffff;
  --color-text-muted:    rgba(244, 236, 220, 0.66);
  --color-text-faint:    rgba(244, 236, 220, 0.42);

  --color-accent:        #eb4171;
  --color-accent-hover:  #ff5a87;
  --color-accent-soft:   rgba(235, 65, 113, 0.15);

  --color-pop:           #52ca28;
  --color-pop-soft:      rgba(82, 202, 40, 0.14);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.5);

  color-scheme: dark;
}

/* LIGHT */
[data-theme="light"] {
  --color-bg:            #f4ecdc;
  --color-bg-2:          #ece2cd;
  --color-surface:       #ffffff;
  --color-surface-2:     #fbf6ec;
  --color-surface-hover: #f6efe0;
  --color-divider:       rgba(7, 34, 61, 0.10);
  --color-border:        rgba(7, 34, 61, 0.16);
  --color-border-strong: rgba(7, 34, 61, 0.32);

  --color-text:          #07223d;
  --color-text-strong:   #04162a;
  --color-text-muted:    rgba(7, 34, 61, 0.66);
  --color-text-faint:    rgba(7, 34, 61, 0.42);

  --color-accent:        #d12d5d;
  --color-accent-hover:  #b32049;
  --color-accent-soft:   rgba(209, 45, 93, 0.10);

  --color-pop:           #3ea015;
  --color-pop-soft:      rgba(62, 160, 21, 0.12);

  --shadow-sm: 0 1px 2px rgba(7,34,61,.06);
  --shadow-md: 0 8px 24px rgba(7,34,61,.10);
  --shadow-lg: 0 24px 60px rgba(7,34,61,.16);

  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-bg:            #f4ecdc;
    --color-bg-2:          #ece2cd;
    --color-surface:       #ffffff;
    --color-surface-2:     #fbf6ec;
    --color-surface-hover: #f6efe0;
    --color-divider:       rgba(7, 34, 61, 0.10);
    --color-border:        rgba(7, 34, 61, 0.16);
    --color-border-strong: rgba(7, 34, 61, 0.32);
    --color-text:          #07223d;
    --color-text-strong:   #04162a;
    --color-text-muted:    rgba(7, 34, 61, 0.66);
    --color-text-faint:    rgba(7, 34, 61, 0.42);
    --color-accent:        #d12d5d;
    --color-accent-hover:  #b32049;
    --color-accent-soft:   rgba(209, 45, 93, 0.10);
    --color-pop:           #3ea015;
    --color-pop-soft:      rgba(62, 160, 21, 0.12);
    --shadow-sm: 0 1px 2px rgba(7,34,61,.06);
    --shadow-md: 0 8px 24px rgba(7,34,61,.10);
    --shadow-lg: 0 24px 60px rgba(7,34,61,.16);
    color-scheme: light;
  }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  hanging-punctuation: first last;
  scroll-padding-top: 80px;
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  min-height: 100dvh;
  line-height: 1.55;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  font-feature-settings: 'ss01', 'cv11';
  overflow-x: hidden;
  max-width: 100vw;
  position: relative;
}
.shell { overflow-x: hidden; max-width: 100vw; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
ul[role="list"], ol[role="list"] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  font-weight: 480;
  text-wrap: balance;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--color-text-strong);
}
p, li, figcaption { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--color-accent); }

::selection {
  background: var(--color-accent);
  color: #fff;
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}