/* ============================================================================
   TALY MARTINS — Design System
   colors_and_type.css  ·  the single source of truth for tokens
   Claude-inspired warm dark mode: salmon accents on a near-black, warm ground.
   Import this FIRST in every artifact, then layer component CSS on top.
   ============================================================================ */

/* ---- Fonts -------------------------------------------------------------------
   Serif:  Libre Caslon Text — editorial display, headlines, pull-quotes, italics
   Sans:   Geist             — body, UI labels, eyebrows, navigation
   (Both are Google-Fonts web versions. ⚠ If desktop/licensed cuts are required,
    drop them in fonts/ and swap the @import.) ------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Geist:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- CORE PALETTE (Claude-inspired warm charcoal) ---------- */
  --c-bg:          #141413;   /* Primary background — warm charcoal */
  --c-surface:     #1D1D1C;   /* Cards, panels */
  --c-text:        #E8E5DF;   /* Primary text — soft cream */
  --c-text-2:      #B8B3AA;   /* Secondary text — warm gray */
  --c-accent:      #FA8072;   /* Salmon — primary accent */
  --c-accent-2:    #FFA07A;   /* Light salmon — accent hover */

  /* ---------- EXTENDED NEUTRALS (derived) ---------- */
  --c-surface-2:   #24221F;   /* Lifted / hover surface */
  --c-surface-hi:  #2A2826;   /* Highest surface — inputs, raised bubbles */
  --c-text-3:      #8E867C;   /* Tertiary / meta text, faint labels */
  --c-accent-deep: #E5604E;   /* Salmon pressed / deep state */
  --c-on-accent:   #2A140F;   /* Ink for text ON salmon fills (AA on #FA8072) */

  /* ---------- BORDERS ---------- */
  --border-1:      rgba(255, 255, 255, 0.08);  /* hairline */
  --border-2:      rgba(255, 255, 255, 0.14);  /* visible divider */
  --border-accent: rgba(250, 128, 114, 0.45);  /* salmon outline */

  /* ---------- ACCENT TINTS (for fills, glows, chips) ---------- */
  --accent-wash:   rgba(250, 128, 114, 0.06);
  --accent-soft:   rgba(250, 128, 114, 0.10);
  --accent-mid:    rgba(250, 128, 114, 0.16);
  --glow:          0.16;      /* multiplier for salmon glow shadows (tweakable) */

  /* ---------- TYPE FAMILIES ---------- */
  --font-serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --font-sans:  'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- TYPE SCALE ---------- */
  --t-hero:     clamp(54px, 9vw, 104px);   /* serif — "Hi, I'm Taly." */
  --t-display:  clamp(30px, 4vw, 44px);    /* serif — section titles */
  --t-h3:       clamp(21px, 2.6vw, 25px);  /* serif — card / question heads */
  --t-h4:       21px;                       /* serif — small card heads */
  --t-lede:     1.18rem;                    /* sans — supporting copy */
  --t-body:     17px;                       /* sans — base */
  --t-small:    15px;                       /* sans — card body, dense */
  --t-meta:     13px;                       /* sans — captions */
  --t-eyebrow:  12px;                       /* sans caps — section eyebrow */
  --t-micro:    10.5px;                      /* sans caps — sidebar role, copyright */

  /* ---------- TRACKING ---------- */
  --tr-eyebrow: 0.22em;   /* signature wide-tracked uppercase eyebrow */
  --tr-label:   0.10em;
  --tr-tight:   -0.015em; /* display serif negative tracking */
  --tr-hero:    -0.025em;

  /* ---------- LINE HEIGHT ---------- */
  --lh-hero:   0.98;
  --lh-tight:  1.08;
  --lh-snug:   1.3;
  --lh-body:   1.6;
  --lh-loose:  1.65;

  /* ---------- SPACING (8-pt grid) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ---------- RADII ---------- */
  --r-xs:   8px;    /* chips, small controls */
  --r-sm:   11px;   /* buttons */
  --r-md:   16px;   /* cards, inputs */
  --r-lg:   22px;   /* large panels, chat */
  --r-xl:   24px;   /* contact / feature shells */
  --r-pill: 999px;  /* pills, avatars, dots */

  /* ---------- SHADOWS (warm, soft, near-black — never cool) ---------- */
  --shadow-1: 0 2px 8px rgba(0,0,0,0.20);
  --shadow-2: 0 18px 40px rgba(0,0,0,0.30);
  --shadow-3: 0 24px 60px rgba(0,0,0,0.35);
  --glow-accent: 0 12px 32px rgba(250,128,114,calc(var(--glow) + 0.05));
  --ring-accent: 0 0 0 4px rgba(250,128,114,0.16);

  /* ---------- MOTION ---------- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);  /* gentle settle, no bounce */
  --dur-1:     160ms;   /* color / opacity */
  --dur-2:     240ms;   /* transforms */
  --dur-3:     700ms;   /* reveal / full transitions */

  --sidebar-w: 320px;
}

/* ============================================================================
   BASE / SEMANTIC TYPOGRAPHY
   ============================================================================ */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(250,128,114,0.28); color: var(--c-text); }

/* Reusable type roles ------------------------------------------------------- */
.serif { font-family: var(--font-serif); }

.display {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent-2);
}

.lede {
  color: var(--c-text-2);
  font-size: var(--t-lede);
  line-height: var(--lh-loose);
}

/* Scripture-of-this-brand: the warm italic pull-quote / highlight line ------- */
.pull {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--c-accent-2);
  line-height: var(--lh-snug);
}

a { color: inherit; text-decoration: none; }