/* =========================================================
   Sunny Day Home Shine — Colors & Type
   Tokens for the SDHS brand. Use the semantic vars for UI,
   and reach for the raw palette only when the semantic
   layer doesn't cover what you need.
   ========================================================= */

/* ---------- Google Fonts (substitutions — see README) ---------- */
@import url("https://fonts.googleapis.com/css2?family=Bowlby+One&family=Luckiest+Guy&family=Caveat:wght@500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap");

:root {
  /* =========================================================
     COLOR PALETTE — raw tokens
     ========================================================= */

  /* Sunshine — the primary brand orange (business-card field, mascot title) */
  --sun-50:  #FFF6E2;
  --sun-100: #FFE7B0;
  --sun-200: #FFD370;
  --sun-300: #FFBA3C;
  --sun-400: #F5A623;   /* business card background */
  --sun-500: #F39B1E;   /* primary orange */
  --sun-600: #E27F12;   /* mascot title fill */
  --sun-700: #B85F08;
  --sun-800: #7C3E04;

  /* Sky — soft blue water wave */
  --sky-100: #E2EDF4;
  --sky-200: #C5D8E1;
  --sky-300: #B7CFDF;   /* water wave on logo */
  --sky-400: #92B5C9;
  --sky-500: #6D9AB3;

  /* Earth — brown labrador */
  --earth-100: #E9D2BB;
  --earth-200: #C8966B;
  --earth-300: #A06A36;
  --earth-400: #7E4A23;   /* dog body */
  --earth-500: #5E3517;
  --earth-600: #3C2208;

  /* Cream — distressed logo text, paper background */
  --cream-50:  #FFFCF3;
  --cream-100: #FBF3D9;
  --cream-200: #FBEED1;   /* logo wordmark fill */
  --cream-300: #F4E0B5;

  /* Ink — outlines, body text */
  --ink-900: #1F1A14;     /* near-black, warm */
  --ink-700: #3A3128;
  --ink-500: #6E6358;
  --ink-300: #B6AEA1;
  --ink-100: #E8E2D6;

  /* Neutrals — true whites & greys */
  --white:    #FFFFFF;
  --gray-50:  #F7F5F0;
  --gray-100: #ECE9E1;
  --gray-200: #D7D2C5;
  --gray-300: #B0AA9B;
  --gray-500: #7A7569;

  /* Semantic accents */
  --success: #4F9D52;     /* fresh, clean grass */
  --warning: #E0A800;     /* tied to sunshine */
  --danger:  #C0392B;     /* warm red */
  --info:    #4F8FB3;     /* in the sky family */

  /* =========================================================
     SEMANTIC COLOR TOKENS
     ========================================================= */
  --brand:           var(--sun-500);
  --brand-deep:      var(--sun-700);
  --brand-soft:      var(--sun-100);
  --accent-sky:      var(--sky-300);
  --accent-earth:    var(--earth-400);

  --bg:              var(--cream-50);
  --bg-elevated:     var(--white);
  --bg-sunshine:     var(--sun-500);
  --bg-sky:          var(--sky-200);
  --bg-night:        var(--ink-900);

  --fg-1:            var(--ink-900);   /* primary text */
  --fg-2:            var(--ink-700);   /* secondary text */
  --fg-3:            var(--ink-500);   /* tertiary / meta */
  --fg-on-brand:     var(--cream-200); /* text on orange */
  --fg-on-dark:      var(--cream-100);

  --border:          var(--ink-100);
  --border-strong:   var(--ink-300);
  --border-ink:      var(--ink-900);   /* mascot-style hard outline */

  /* =========================================================
     TYPOGRAPHY — font families
     ========================================================= */
  --font-display-distressed: "Bowlby One", "Impact", "Arial Black", system-ui, sans-serif;
  --font-display-bold:       "Luckiest Guy", "Bungee", "Impact", system-ui, sans-serif;
  --font-hand:               "Caveat", "Patrick Hand", "Comic Sans MS", cursive;
  --font-sans:               "Nunito", "Quicksand", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:               ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (1.25 modular) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  84px;

  /* Line heights */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  /* Letter spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* =========================================================
     SPACING / RADII / SHADOWS / MOTION
     ========================================================= */
  --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;

  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    18px;
  --radius-xl:    28px;
  --radius-pill:  999px;

  /* Mascot-style hard outline + drop shadow */
  --outline-ink: 3px solid var(--ink-900);
  --outline-ink-thin: 2px solid var(--ink-900);

  --shadow-sm: 0 1px 2px rgba(31, 26, 20, 0.10);
  --shadow-md: 0 4px 14px rgba(31, 26, 20, 0.10);
  --shadow-lg: 0 12px 32px rgba(31, 26, 20, 0.14);
  /* Sticker / cartoon offset shadow — pairs with --outline-ink */
  --shadow-sticker: 4px 4px 0 var(--ink-900);
  --shadow-sticker-sun: 4px 4px 0 var(--earth-500);

  /* Motion */
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    380ms;
}

/* =========================================================
   SEMANTIC ELEMENT STYLES — drop into any prototype to
   inherit the SDHS feel.
   ========================================================= */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display-distressed);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-deep);
  -webkit-text-stroke: 1.5px var(--ink-900);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  margin: 0;
}

p {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--brand-deep);
}

.hand,
.handwritten {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: 1.1;
  color: var(--fg-1);
}

.lead {
  font-size: var(--fs-md);
  color: var(--fg-2);
  line-height: var(--lh-loose);
}

small, .small {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Mascot title treatment — bold orange w/ ink outline */
.mascot-title {
  font-family: var(--font-display-bold);
  font-size: var(--fs-4xl);
  color: var(--sun-600);
  -webkit-text-stroke: 3px var(--ink-900);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink-900);
  letter-spacing: var(--tracking-wide);
  line-height: 0.95;
  text-transform: uppercase;
}