/* =========================================================================
   Pyrra Design System — Colors & Type
   -------------------------------------------------------------------------
   Pyrra is local AI inference infrastructure. The brand is built on
   black & cream typography with a fire-orange accent that signals where
   energy lives — headline keywords, primary actions, icons, status dots.
   ========================================================================= */

/* ----- Fonts ------------------------------------------------------------ */
/* Display: Cormorant Garamond — elegant humanist serif used for headlines
   and the marketing display lockups. Substituted from a custom serif
   used in the reference designs (see README "Font substitutions").       */
/* Body:    Inter — modern neutral sans for UI, body copy and eyebrows.   */
/* Mono:    JetBrains Mono — used in product/spec contexts only.          */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Brand: fire gradient stops ---------- */
  --fire-900: #801100;  /* deepest ember — for dark gradients only       */
  --fire-800: #B62203;
  --fire-700: #D73502;  /* primary brand fire — buttons, links, accents  */
  --fire-600: #FC6400;  /* hover / highlight                              */
  --fire-500: #FF7500;
  --fire-400: #FAC000;  /* warm yellow tip / status pending               */

  /* Semantic accents derived from the fire palette */
  --accent:        var(--fire-700);
  --accent-hover:  var(--fire-600);
  --accent-press:  var(--fire-800);

  /* ---------- Neutrals: warm black through cream ---------- */
  --ink-900: #0E0D0C;   /* near-black, all primary text                   */
  --ink-800: #1A1916;
  --ink-700: #2B2A27;
  --ink-600: #4A4843;   /* secondary text                                  */
  --ink-500: #6B6962;   /* tertiary text, meta                              */
  --ink-400: #9A968D;   /* placeholder / disabled                           */
  --ink-300: #C9C5BC;   /* dividers on cream                                 */
  --ink-200: #E4DFD5;   /* card border on cream                              */
  --ink-100: #F0EBE2;   /* card background tone                              */
  --cream:   #F7F2EA;   /* primary page background                           */
  --paper:   #FFFFFF;   /* card / panel surface                              */

  /* ---------- Foreground / Background semantic ---------- */
  --fg-1: var(--ink-900);   /* headings, primary text                    */
  --fg-2: var(--ink-600);   /* body copy                                  */
  --fg-3: var(--ink-500);   /* meta, captions, eyebrows on light          */
  --fg-disabled: var(--ink-400);
  --fg-on-fire: #FFFFFF;     /* text on orange surfaces                    */
  --fg-on-dark: #FFFFFF;

  --bg-1: var(--cream);     /* page                                        */
  --bg-2: var(--paper);     /* cards / panels                              */
  --bg-3: var(--ink-100);   /* subtle wells, inputs                        */
  --bg-inverse: var(--ink-900);

  /* ---------- Borders ---------- */
  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-focus:  var(--accent);

  /* ---------- Status (small dots on map / tags) ---------- */
  --status-available: #2EA84F;
  --status-pending:   #F5A524;
  --status-reserved:  #E5484D;

  /* ---------- Gradients ---------- */
  --gradient-fire:    linear-gradient(135deg, #FAC000 0%, #FF7500 35%, #FC6400 55%, #D73502 80%, #801100 100%);
  --gradient-ember:   linear-gradient(180deg, rgba(215,53,2,0) 0%, rgba(215,53,2,0.18) 60%, rgba(128,17,0,0.55) 100%);
  --gradient-cta-bar: linear-gradient(90deg, #2B2A27 0%, #1A1916 35%, rgba(214,80,21,0.55) 100%);
  --gradient-cream-fade: linear-gradient(180deg, var(--cream) 0%, #EFE9DD 100%);

  /* ---------- Shadow & elevation (see spacing-and-radii.css) ---------- */
  --shadow-card:   0 1px 2px rgba(14,13,12,0.04), 0 1px 1px rgba(14,13,12,0.03);
  --shadow-raised: 0 8px 24px -8px rgba(14,13,12,0.18), 0 2px 4px rgba(14,13,12,0.05);
  --shadow-fire:   0 8px 24px -10px rgba(215,53,2,0.45);
  --shadow-inset:  inset 0 0 0 1px var(--border-subtle);

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;     /* inputs, small chips                            */
  --radius-md: 10px;    /* buttons, cards                                 */
  --radius-lg: 14px;    /* large cards, modal                             */
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;

  /* ---------- Font families ---------- */
  --font-display: "Cormorant Garamond", "EB Garamond", "Times New Roman", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Type scale (display = serif; ui = sans) ---------- */
  --fs-display-xl: clamp(56px, 7vw, 88px);   /* hero headline             */
  --fs-display-lg: clamp(40px, 5vw, 64px);   /* section hero              */
  --fs-display-md: clamp(32px, 3.5vw, 44px); /* section heading           */
  --fs-display-sm: 28px;                      /* card heading             */

  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-h4: 18px;

  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-meta:    13px;
  --fs-eyebrow: 12px;

  --lh-tight:   1.08;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-eyebrow: 0.18em;
  --tracking-tight:   -0.01em;

  /* ---------- Motion ---------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     320ms;
}

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

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

/* ----- Display headlines (serif, used on marketing) -------------------- */
.display-xl, .display-lg, .display-md, .display-sm {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.display-xl { font-size: var(--fs-display-xl); }
.display-lg { font-size: var(--fs-display-lg); }
.display-md { font-size: var(--fs-display-md); line-height: var(--lh-snug); }
.display-sm { font-size: var(--fs-display-sm); line-height: var(--lh-snug); }

/* Accent word inside a serif headline — the signature Pyrra move */
.accent-word {
  color: var(--accent);
  font-style: normal;
}

/* ----- UI headings (sans) ---------------------------------------------- */
h1, .h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
h2, .h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3, .h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4, .h4 { font-family: var(--font-body);    font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); }

/* ----- Body text ------------------------------------------------------- */
p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}
.p-lg { font-size: var(--fs-body-lg); }
.p-sm { font-size: var(--fs-body-sm); }

/* ----- Eyebrow — small uppercase orange label ------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* ----- Meta ----------------------------------------------------------- */
.meta {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.meta-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ----- Code ----------------------------------------------------------- */
code, .code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.35em;
}

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

/* ----- Selection ------------------------------------------------------ */
::selection {
  background: var(--fire-700);
  color: var(--fg-on-fire);
}