/* =====================================================================
   Load Star Builders — Design Tokens
   Colors, type, spacing, radii, shadows.
   Load this stylesheet first in any prototype.
   ===================================================================== */

/* --- Web fonts ------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* =================================================================
     COLORS
     Pulled from the Sonoran Desert — adobe clay, mesa red, saguaro,
     sand, bone, ironwood. Low-chroma, warm-biased. Never pure white,
     never pure black.
     ================================================================= */

  /* Clay — primary brand color. Adobe + kiln-fired terracotta. */
  --clay-50:  #FAF1EA;
  --clay-100: #F2DDCB;
  --clay-200: #E6BFA2;
  --clay-300: #D8A079;
  --clay-400: #C77F54;
  --clay-500: #B5663C;   /* primary */
  --clay-600: #9E5530;
  --clay-700: #834425;
  --clay-800: #67341B;
  --clay-900: #4A2513;

  /* Mesa — secondary punch. Sunset-on-rock red. */
  --mesa-50:  #FBEDE7;
  --mesa-100: #F4D1C2;
  --mesa-200: #E9A88E;
  --mesa-300: #DC7E5C;
  --mesa-400: #CE5934;
  --mesa-500: #BA3F1F;   /* accent */
  --mesa-600: #9F3216;
  --mesa-700: #82270F;
  --mesa-800: #641D0A;
  --mesa-900: #471305;

  /* Saguaro — trust / success. Cactus skin in shade. */
  --saguaro-50:  #EEF1E7;
  --saguaro-100: #D8DEC4;
  --saguaro-200: #B7C194;
  --saguaro-300: #94A266;
  --saguaro-400: #748443;
  --saguaro-500: #5A6A2F;   /* success */
  --saguaro-600: #485624;
  --saguaro-700: #38441B;
  --saguaro-800: #2A3413;
  --saguaro-900: #1D250C;

  /* Sand — warm neutral mid-tones. Sonoran soil. */
  --sand-50:  #FBF6EC;
  --sand-100: #F2E9D5;
  --sand-200: #E6D8B8;
  --sand-300: #D4C29A;   /* default border */
  --sand-400: #BCA77A;
  --sand-500: #A08B5E;
  --sand-600: #826F48;
  --sand-700: #645434;
  --sand-800: #483C24;
  --sand-900: #2E2614;

  /* Bone — backgrounds. Sun-bleached caliche. */
  --bone:     #F6F0E6;   /* default surface */
  --bone-90:  rgba(246, 240, 230, 0.90);
  --paper:    #FBF7EF;   /* cards */
  --paper-2:  #FDFAF4;   /* raised cards / inputs */

  /* Ironwood — deep brown. Body text + dark surfaces. */
  --iron-50:  #EDE7DE;
  --iron-100: #C9BFB0;
  --iron-200: #9C8E7B;
  --iron-300: #6E614F;
  --iron-400: #4A3F30;
  --iron-500: #322819;   /* body text */
  --iron-600: #261D11;
  --iron-700: #1B140A;
  --iron-800: #120D06;
  --iron-900: #0A0703;

  /* Sky — small accent for info / cool detail. Desert dusk. */
  --sky-100: #D8E3E8;
  --sky-300: #88AAB6;
  --sky-500: #4A7385;
  --sky-700: #2E4E5C;

  /* Sunset — gradient + warning. Late-afternoon glow. */
  --sunset-100: #FBE2B9;
  --sunset-300: #F4B86A;
  --sunset-500: #E48A2C;   /* warning */
  --sunset-700: #B5621A;

  /* =================================================================
     SEMANTIC COLORS
     Use these in components, not the raw scale above.
     ================================================================= */

  --fg-1:        var(--iron-500);   /* primary body */
  --fg-2:        var(--iron-400);   /* secondary body */
  --fg-3:        var(--iron-300);   /* tertiary / captions */
  --fg-muted:    var(--iron-200);   /* hint / placeholder */
  --fg-on-clay:  var(--bone);       /* text on clay buttons */
  --fg-on-iron:  var(--bone);       /* text on dark surfaces */

  --bg-page:     var(--bone);
  --bg-card:     var(--paper);
  --bg-raised:   var(--paper-2);
  --bg-sunken:   var(--sand-100);
  --bg-dark:     var(--iron-600);

  --border:      var(--sand-300);
  --border-strong: var(--sand-400);
  --border-dark: var(--iron-400);

  --brand:       var(--clay-500);
  --brand-hover: var(--clay-600);
  --brand-press: var(--clay-700);

  --accent:      var(--mesa-500);
  --success:     var(--saguaro-500);
  --warning:     var(--sunset-500);
  --danger:      var(--mesa-600);
  --info:        var(--sky-500);

  /* =================================================================
     TYPOGRAPHY
     Bitter (slab serif) for display + headings.
     Manrope (humanist sans) for body + UI.
     JetBrains Mono for spec numbers / project codes.
     ================================================================= */

  --font-display: "Bitter", "Georgia", "Source Serif Pro", serif;
  --font-sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Scale — type ramp */
  --text-12: 0.75rem;     /* 12px — micro / tags */
  --text-13: 0.8125rem;   /* 13px — small caption */
  --text-14: 0.875rem;    /* 14px — meta, label */
  --text-15: 0.9375rem;   /* 15px — UI default */
  --text-16: 1rem;        /* 16px — body */
  --text-18: 1.125rem;    /* 18px — lead body */
  --text-20: 1.25rem;     /* 20px — large body / h6 */
  --text-24: 1.5rem;      /* 24px — h5 */
  --text-30: 1.875rem;    /* 30px — h4 */
  --text-36: 2.25rem;     /* 36px — h3 */
  --text-48: 3rem;        /* 48px — h2 */
  --text-64: 4rem;        /* 64px — h1 */
  --text-80: 5rem;        /* 80px — display */

  /* =================================================================
     SPACING
     4px base, half-steps at 2 and 6.
     ================================================================= */

  --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;
  --space-32: 128px;

  /* =================================================================
     RADII
     ================================================================= */

  --radius-sm:   4px;
  --radius-btn:  6px;
  --radius-md:   8px;   /* default — cards, inputs */
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* =================================================================
     SHADOWS — warm-tinted, no blue/gray.
     ================================================================= */

  --shadow-1: 0 1px 2px rgba(58, 34, 18, 0.06);
  --shadow-2: 0 4px 12px rgba(58, 34, 18, 0.08);
  --shadow-3: 0 12px 28px rgba(58, 34, 18, 0.10);
  --shadow-4: 0 24px 56px rgba(58, 34, 18, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.4),
                  inset 0 -1px 0 rgba(58, 34, 18, 0.06);

  /* =================================================================
     MOTION
     ================================================================= */

  --ease:       cubic-bezier(.2, .7, .2, 1);
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --dur-slow:   320ms;
  --dur-reveal: 480ms;
}

/* =====================================================================
   SEMANTIC TYPE STYLES
   Use these classes (or copy their declarations) instead of restyling
   tags ad-hoc. Headings are tight, body is generous.
   ===================================================================== */

html { color-scheme: light; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-16);
  line-height: 1.55;
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 5vw + 1rem, var(--text-80));
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--iron-600);
}

.h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-64);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--iron-600);
}

.h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-48);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--iron-600);
}

.h3, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-36);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--iron-600);
}

.h4, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-30);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--iron-500);
}

.h5, h5 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-24);
  line-height: 1.3;
  color: var(--iron-500);
}

.h6, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-20);
  line-height: 1.35;
  color: var(--iron-500);
}

.lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-20);
  line-height: 1.5;
  color: var(--fg-2);
}

.body, p {
  font-family: var(--font-sans);
  font-size: var(--text-16);
  line-height: 1.6;
  color: var(--fg-1);
  text-wrap: pretty;
}

.body-sm, small {
  font-size: var(--text-14);
  line-height: 1.55;
  color: var(--fg-2);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-13);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay-600);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--text-12);
  letter-spacing: 0.04em;
  color: var(--fg-3);
}

.mono, code, kbd, .spec {
  font-family: var(--font-mono);
  font-size: 0.94em;
  letter-spacing: -0.01em;
}

a {
  color: var(--clay-700);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
a:hover { border-bottom-color: var(--clay-600); }
a:active { color: var(--clay-800); }

hr {
  border: 0;
  height: 1px;
  background: var(--sand-300);
  margin: var(--space-8) 0;
}

::selection { background: var(--clay-200); color: var(--iron-700); }