/* ==========================================================================
   Jam AI — Colors & Type
   The foundation. Import this in every HTML artifact.
   ========================================================================== */

/* Poppins — self-hosted (Jam-uploaded). Caveat is from Google Fonts for the hand accent. */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap');

@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Thin.ttf') format('truetype');            font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ThinItalic.ttf') format('truetype');      font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ExtraLight.ttf') format('truetype');      font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype');font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Light.ttf') format('truetype');           font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-LightItalic.ttf') format('truetype');     font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Regular.ttf') format('truetype');         font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Italic.ttf') format('truetype');          font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Medium.ttf') format('truetype');          font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-MediumItalic.ttf') format('truetype');    font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-SemiBold.ttf') format('truetype');        font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype');  font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Bold.ttf') format('truetype');            font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-BoldItalic.ttf') format('truetype');      font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ExtraBold.ttf') format('truetype');       font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Black.ttf') format('truetype');           font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-BlackItalic.ttf') format('truetype');     font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* ---------- Brand palette ---------- */
  --jam-orange:        #ff6b35;   /* Primary. The jam. */
  --jam-orange-600:    #ff5a1f;   /* Hover/press deepen */
  --jam-orange-700:    #e84a10;   /* Pressed / active */
  --jam-orange-200:    #ffcdb8;   /* Soft fill / chip bg */
  --jam-orange-100:    #ffe5d8;   /* Tinted card bg */
  --jam-orange-50:     #fff4ee;   /* Wash / page accent */

  --jam-yellow:        #ffd45c;   /* Secondary. Letterform yellow. */
  --jam-yellow-300:    #ffe896;
  --jam-yellow-100:    #fff6dc;

  --jam-peach:         #ffb38a;   /* Tertiary warm */
  --jam-berry:         #d64545;   /* Accent for errors/alerts */
  --jam-mint:          #6dd3a8;   /* Success / "you got it!" */
  --jam-sky:           #7cc7f2;   /* Info / links (rare) */

  /* ---------- Neutrals (warm) ---------- */
  --cream:             #fffaf5;   /* Page background */
  --cream-2:           #fff5eb;   /* Alt panel bg */
  --paper:             #ffffff;   /* Cards */
  --ink:               #2a1e17;   /* Body text, warm near-black */
  --ink-2:             #4a3a30;   /* Headings alt / dark label */
  --muted:             #7a6a60;   /* Secondary text */
  --muted-2:           #a89a90;   /* Tertiary / placeholder */
  --line:              #f0e3d6;   /* Hairline borders */
  --line-strong:       #e4d2bf;   /* Stronger border */

  /* ---------- Semantic ---------- */
  --bg:                var(--cream);
  --bg-alt:            var(--cream-2);
  --surface:           var(--paper);
  --surface-tinted:    var(--jam-orange-50);
  --fg1:               var(--ink);         /* Primary text */
  --fg2:               var(--ink-2);       /* Headings */
  --fg3:               var(--muted);       /* Secondary */
  --fg4:               var(--muted-2);     /* Tertiary */
  --border:            var(--line);
  --border-strong:     var(--line-strong);
  --accent:            var(--jam-orange);
  --accent-ink:        #ffffff;            /* Text on orange */
  --success:           var(--jam-mint);
  --danger:            var(--jam-berry);
  --warning:           var(--jam-yellow);

  /* ---------- Radii ---------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-pill: 999px;

  /* ---------- Shadows (soft, warm) ---------- */
  --shadow-xs: 0 1px 2px rgba(74, 58, 48, 0.06);
  --shadow-sm: 0 2px 8px rgba(74, 58, 48, 0.07);
  --shadow-md: 0 6px 18px rgba(74, 58, 48, 0.08), 0 2px 4px rgba(74, 58, 48, 0.04);
  --shadow-lg: 0 18px 40px rgba(74, 58, 48, 0.10), 0 4px 10px rgba(74, 58, 48, 0.05);
  --shadow-pop: 0 8px 0 0 var(--jam-orange-700); /* Chunky "pop" shadow for buttons */
  --shadow-pop-yellow: 0 6px 0 0 #e0b33a;

  /* ---------- Spacing scale (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- Type families ---------- */
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand:    'Caveat', 'Poppins', cursive;      /* For playful annotations */
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --fz-xs:   12px;
  --fz-sm:   14px;
  --fz-base: 16px;
  --fz-md:   18px;
  --fz-lg:   20px;
  --fz-xl:   24px;
  --fz-2xl:  30px;
  --fz-3xl:  38px;
  --fz-4xl:  48px;
  --fz-5xl:  64px;
  --fz-6xl:  80px;

  /* ---------- Weights ---------- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---------- Motion ---------- */
  --ease-pop:   cubic-bezier(.34, 1.56, .64, 1);      /* Playful overshoot */
  --ease-out:   cubic-bezier(.2, .8, .2, 1);
  --ease-in:    cubic-bezier(.4, 0, 1, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 500ms;
}

/* ==========================================================================
   Base elements — plug colors_and_type.css in and everything looks on-brand
   ========================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--fz-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-3);
  font-weight: var(--fw-bold);
  text-wrap: balance;
}

h1 { font-size: var(--fz-5xl); font-weight: var(--fw-extrabold); letter-spacing: -0.025em; }
h2 { font-size: var(--fz-4xl); font-weight: var(--fw-bold);      letter-spacing: -0.02em; }
h3 { font-size: var(--fz-2xl); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fz-xl);  font-weight: var(--fw-semibold); }
h5 { font-size: var(--fz-lg);  font-weight: var(--fw-semibold); }
h6 { font-size: var(--fz-md);  font-weight: var(--fw-semibold); }

p {
  margin: 0 0 var(--s-4);
  color: var(--fg1);
  text-wrap: pretty;
}

small { font-size: var(--fz-sm); color: var(--fg3); }

a {
  color: var(--jam-orange-700);
  text-decoration: underline;
  text-decoration-color: var(--jam-orange-200);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out);
}
a:hover { color: var(--jam-orange); text-decoration-color: var(--jam-orange); }

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--jam-orange-50);
  color: var(--ink-2);
  padding: 0.12em 0.4em;
  border-radius: var(--r-xs);
}

/* Hand-written accent for playful moments */
.hand {
  font-family: var(--font-hand);
  font-weight: 600;
  color: var(--jam-orange);
  font-size: 1.3em;
  line-height: 1;
}

/* Highlight / "jam marker" */
.jam-mark {
  background: linear-gradient(180deg, transparent 55%, var(--jam-yellow) 55%);
  padding: 0 0.1em;
}

/* Utility focus ring */
:focus-visible {
  outline: 3px solid var(--jam-orange);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}