/* ===========================================================
   RealSpace Creative — Colors & Type
   A warm, sunset-toned palette built around coral + peach.
   =========================================================== */

@font-face {
  font-family: "Atelier";
  src: url("fonts/atelier.otf") format("opentype");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("fonts/Lora-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("fonts/Lora-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Brand palette (from colours rs creative.png) -------- */
  --rs-coral-red:     #f75643;  /* primary action / star      */
  --rs-coral:         #fd847a;  /* warm pink-coral            */
  --rs-salmon:        #fc8b6a;  /* mid coral                  */
  --rs-orange:        #fd975a;  /* vivid orange               */
  --rs-orange-soft:   #fca257;  /* warm orange                */
  --rs-amber:         #f9ad62;  /* amber                      */
  --rs-peach:         #fcbe8b;  /* peach                      */
  --rs-peach-soft:    #fbc48d;  /* lighter peach              */
  --rs-sand:          #f8ca96;  /* sand / wheat               */
  --rs-blush:         #ffb4b3;  /* pale pink                  */
  --rs-cream:         #fffbf3;  /* off-white background       */

  /* ---- Signature gradient (logo halo, hero washes) -------- */
  --rs-gradient-sunset: linear-gradient(135deg, #fbc48d 0%, #fc8b6a 55%, #fd847a 100%);
  --rs-gradient-halo:   radial-gradient(60% 60% at 40% 35%, #ffd6b0 0%, #fcbe8b 45%, #fc8b6a 100%);
  --rs-gradient-ember:  linear-gradient(180deg, #fd975a 0%, #f75643 100%);

  /* ---- Neutrals (warm, never cold) ----------------------- */
  --rs-ink:           #2b1a14;  /* near-black, warm brown     */
  --rs-ink-soft:      #4a3a32;  /* body text                  */
  --rs-ink-muted:     #7a6a62;  /* secondary text             */
  --rs-line:          #ead9c9;  /* hairline on cream          */
  --rs-paper:         #fffbf3;  /* page bg                    */
  --rs-paper-warm:    #fdf3e6;  /* secondary surface          */
  --rs-white:         #ffffff;

  /* ---- Semantic tokens ----------------------------------- */
  --bg:               var(--rs-paper);
  --bg-alt:           var(--rs-paper-warm);
  --surface:          var(--rs-white);
  --fg1:              var(--rs-ink);
  --fg2:              var(--rs-ink-soft);
  --fg3:              var(--rs-ink-muted);
  --fg-inverse:       var(--rs-cream);
  --border:           var(--rs-line);
  --accent:           var(--rs-coral-red);
  --accent-hover:     #e0432f;
  --accent-soft:      var(--rs-coral);
  --highlight:        var(--rs-orange);

  /* ---- Type families ------------------------------------- */
  --font-display:     "Atelier", "Fraunces", Georgia, serif;
  --font-serif:       "Lora", Georgia, "Times New Roman", serif;
  --font-sans:        "Atelier", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:        ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* ---- Type scale (display = Atelier, body = Lora) ------- */
  --fs-display:       clamp(56px, 8vw, 120px);
  --fs-h1:            clamp(40px, 5.5vw, 72px);
  --fs-h2:            clamp(32px, 4vw, 52px);
  --fs-h3:            clamp(24px, 2.6vw, 34px);
  --fs-h4:            20px;
  --fs-body-lg:       19px;
  --fs-body:          17px;
  --fs-small:         14px;
  --fs-micro:         12px;

  --lh-tight:         0.95;
  --lh-snug:          1.1;
  --lh-normal:        1.45;
  --lh-loose:         1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.12em;

  /* ---- Spacing (4pt grid, generous on desktop) ----------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---- Radii --------------------------------------------- */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  36px;
  --radius-pill: 999px;

  /* ---- Shadows (warm, low-spread) ------------------------ */
  --shadow-xs: 0 1px 2px rgba(43, 26, 20, 0.06);
  --shadow-sm: 0 2px 8px rgba(43, 26, 20, 0.08);
  --shadow-md: 0 8px 24px rgba(247, 86, 67, 0.10), 0 2px 6px rgba(43,26,20,0.06);
  --shadow-lg: 0 20px 48px rgba(247, 86, 67, 0.14), 0 6px 16px rgba(43,26,20,0.08);
  --shadow-press: inset 0 2px 6px rgba(43, 26, 20, 0.12);

  /* ---- Motion -------------------------------------------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-soft:  cubic-bezier(0.32, 0.72, 0.24, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ===========================================================
   Semantic element styles
   =========================================================== */

body {
  background: var(--bg);
  color: var(--fg2);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg1);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); text-transform: none; letter-spacing: var(--tracking-normal); }
h4 { font-size: var(--fs-h4); }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg1);
  font-weight: 800;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

p, .body {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg2);
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--fg1);
}

small, .small { font-size: var(--fs-small); color: var(--fg3); }

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

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); }

::selection { background: var(--rs-blush); color: var(--rs-ink); }