/* =============================================================
   Rio Grande Websites — Design Tokens & Semantic Styles
   ============================================================= */

/* Satoshi — brand sans (self-hosted variable font, regular + italic) */
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Variable.woff2') format('woff2-variations'),
       url('fonts/Satoshi-Variable.woff')  format('woff-variations'),
       url('fonts/Satoshi-Variable.ttf')   format('truetype-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-VariableItalic.woff2') format('woff2-variations'),
       url('fonts/Satoshi-VariableItalic.woff')  format('woff-variations'),
       url('fonts/Satoshi-VariableItalic.ttf')   format('truetype-variations');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* Cormorant Garamond — loaded via <link> in each HTML file to avoid blocking @import */

:root {
  /* -----------------------------------------------------------
     COLORS — brand
     Editorial Southwest: golden-hour adobe, deep evergreen, aged
     brass, burnt sienna, walnut. Accents are deeper and more
     considered than the original "studio sample" tones.
     ----------------------------------------------------------- */
  --rg-warm-white:    #F1ECE2;   /* parchment cream */
  --rg-sand-beige:    #DCC9B2;   /* tobacco sand */
  --rg-soft-clay:     #A65540;   /* burnt sienna */
  --rg-turquoise:     #2D5F58;   /* deep evergreen — replaces bright turquoise */
  --rg-desert-yellow: #C49543;   /* aged brass / ochre */
  --rg-sage-green:    #6E7A4F;   /* olive */
  --rg-charcoal:      #1F1A14;   /* deep walnut */

  /* -----------------------------------------------------------
     COLORS — extended scales (derived from brand)
     Used for hover/active states, soft tints, and contrasted text.
     ----------------------------------------------------------- */
  /* Cream (warm neutral surface) */
  --rg-cream-50:  #F9F5EC;
  --rg-cream-100: #F5F0E5;
  --rg-cream-200: #F1ECE2;   /* === Warm White */
  --rg-cream-300: #E9E2D4;
  --rg-cream-400: #DFD6C4;

  /* Sand */
  --rg-sand-100: #EBDFCD;
  --rg-sand-200: #DCC9B2;    /* === Sand Beige */
  --rg-sand-300: #C9B194;
  --rg-sand-400: #B49775;

  /* Clay (burnt sienna scale) */
  --rg-clay-50:  #F4E4DC;
  --rg-clay-100: #EBCEC1;
  --rg-clay-300: #D08D75;
  --rg-clay-500: #A65540;    /* === Soft Clay (burnt sienna) */
  --rg-clay-700: #823D2B;
  --rg-clay-900: #4E2218;

  /* "Turquoise" — now deep evergreen (semantic name kept) */
  --rg-turq-50:  #E5EDEB;
  --rg-turq-100: #C7D9D5;
  --rg-turq-300: #6F938C;
  --rg-turq-500: #2D5F58;    /* === Evergreen */
  --rg-turq-700: #1E423D;
  --rg-turq-900: #112624;

  /* Yellow (aged brass) */
  --rg-yellow-50:  #F8EFD7;
  --rg-yellow-100: #ECD9A4;
  --rg-yellow-300: #DBB970;
  --rg-yellow-500: #C49543;  /* === Aged Brass */
  --rg-yellow-700: #946D27;
  --rg-yellow-900: #5A4214;

  /* Sage (olive) */
  --rg-sage-50:  #EAECDF;
  --rg-sage-100: #D2D6BD;
  --rg-sage-300: #9DA681;
  --rg-sage-500: #6E7A4F;    /* === Olive */
  --rg-sage-700: #4A5234;
  --rg-sage-900: #2A2F1E;

  /* Ink (warm-tinted neutrals — never pure black/grey) */
  --rg-ink-900: #1F1A14;     /* === Walnut */
  --rg-ink-700: #3A332A;
  --rg-ink-500: #5F564A;
  --rg-ink-400: #7E7567;
  --rg-ink-300: #A29986;
  --rg-ink-200: #C8C0AE;
  --rg-ink-100: #E3DCCC;

  /* -----------------------------------------------------------
     SEMANTIC COLOR ROLES
     ----------------------------------------------------------- */
  --rg-bg:            var(--rg-cream-200);   /* page surface */
  --rg-bg-muted:      var(--rg-sand-100);    /* tinted section */
  --rg-bg-card:       #FFFFFF;
  --rg-bg-inverse:    var(--rg-ink-900);

  --rg-fg:            var(--rg-ink-900);     /* primary text */
  --rg-fg-soft:       var(--rg-ink-700);     /* secondary text */
  --rg-fg-muted:      var(--rg-ink-500);     /* tertiary text */
  --rg-fg-faint:      var(--rg-ink-400);     /* placeholder, captions */
  --rg-fg-on-dark:    var(--rg-cream-100);
  --rg-fg-on-accent:  #FFFFFF;

  --rg-line:          rgba(31, 26, 20, 0.08);
  --rg-line-strong:   rgba(31, 26, 20, 0.14);

  --rg-accent:           var(--rg-clay-500);    /* primary accent */
  --rg-accent-hover:     var(--rg-clay-700);
  --rg-accent-soft:      var(--rg-clay-100);
  --rg-accent-2:         var(--rg-turq-500);    /* secondary accent */
  --rg-accent-2-soft:    var(--rg-turq-100);
  --rg-accent-3:         var(--rg-yellow-500);
  --rg-accent-3-soft:    var(--rg-yellow-100);
  --rg-accent-4:         var(--rg-sage-500);
  --rg-accent-4-soft:    var(--rg-sage-100);

  /* Status (rare in marketing, used in forms) */
  --rg-success: #5E8C5A;
  --rg-warning: var(--rg-yellow-700);
  --rg-error:   #B0463A;

  /* Selection */
  --rg-selection-bg: var(--rg-turq-100);
  --rg-selection-fg: var(--rg-ink-900);

  /* -----------------------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------------------- */
  --font-sans:    'Satoshi', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (rems, 16px base) */
  --fs-micro:      0.75rem;     /* 12 */
  --fs-caption:    0.875rem;    /* 14 */
  --fs-body:       1rem;        /* 16 */
  --fs-body-lg:    1.125rem;    /* 18 */
  --fs-body-xl:    1.25rem;     /* 20 */
  --fs-h4:         1.375rem;    /* 22 */
  --fs-h3:         1.75rem;     /* 28 */
  --fs-h2:         2.25rem;     /* 36 */
  --fs-h1:         3rem;        /* 48 */
  --fs-display:    4rem;        /* 64 */
  --fs-display-xl: 5.5rem;      /* 88 */

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

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-base:    1.55;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --tr-tighter: -0.03em;
  --tr-tight:   -0.015em;
  --tr-normal:  0;
  --tr-wide:    0.04em;
  --tr-eyebrow: 0.12em;

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

  /* Section padding helpers */
  --section-pad-y: clamp(64px, 9vw, 128px);
  --section-pad-x: clamp(20px, 5vw, 64px);
  --content-max:   1240px;

  /* -----------------------------------------------------------
     RADII
     ----------------------------------------------------------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md: 12px;     /* buttons, inputs */
  --r-lg: 16px;
  --r-xl: 20px;     /* cards */
  --r-2xl: 24px;    /* image containers */
  --r-3xl: 32px;    /* hero containers */
  --r-pill: 999px;

  /* -----------------------------------------------------------
     SHADOWS — warm-tinted (clay-cast, never neutral grey)
     ----------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(60, 30, 20, 0.04);
  --shadow-sm: 0 1px 2px rgba(60, 30, 20, 0.04), 0 2px 6px rgba(60, 30, 20, 0.04);
  --shadow-md: 0 4px 12px rgba(60, 30, 20, 0.06), 0 12px 32px rgba(60, 30, 20, 0.06);
  --shadow-lg: 0 8px 24px rgba(60, 30, 20, 0.08), 0 32px 64px rgba(60, 30, 20, 0.08);
  --shadow-xl: 0 16px 40px rgba(60, 30, 20, 0.10), 0 48px 96px rgba(60, 30, 20, 0.10);
  --shadow-focus: 0 0 0 3px rgba(45, 95, 88, 0.34);

  /* -----------------------------------------------------------
     MOTION
     ----------------------------------------------------------- */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;

  /* -----------------------------------------------------------
     LAYERING
     ----------------------------------------------------------- */
  --z-nav:    50;
  --z-modal: 100;
  --z-toast: 200;
}

/* =============================================================
   SEMANTIC TYPE STYLES
   ============================================================= */

html {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--rg-fg);
  background: var(--rg-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--rg-fg);
  background: var(--rg-bg);
  margin: 0;
}

::selection {
  background: var(--rg-selection-bg);
  color: var(--rg-selection-fg);
}

/* Display — use for hero moments only */
.rg-display-xl,
.rg-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-tighter);
  line-height: var(--lh-tight);
  color: var(--rg-fg);
}
.rg-display-xl { font-size: var(--fs-display-xl); }
.rg-display    { font-size: var(--fs-display); }

/* Editorial display — Cormorant italic, used sparingly for the
   handcrafted accent word inside a hero or pull quote */
.rg-display-editorial {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
}

/* Headings */
h1, .rg-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--rg-fg);
  margin: 0 0 var(--sp-5);
}
h2, .rg-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--rg-fg);
  margin: 0 0 var(--sp-4);
}
h3, .rg-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  letter-spacing: var(--tr-tight);
  color: var(--rg-fg);
  margin: 0 0 var(--sp-3);
}
h4, .rg-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--rg-fg);
  margin: 0 0 var(--sp-3);
}

/* Body */
p, .rg-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--rg-fg-soft);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}
.rg-body-lg {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
}
.rg-body-xl {
  font-size: var(--fs-body-xl);
  line-height: 1.55;
}

/* Eyebrow / kicker */
.rg-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--rg-clay-700);
}

/* Caption / micro */
.rg-caption {
  font-size: var(--fs-caption);
  color: var(--rg-fg-muted);
  line-height: 1.5;
}
.rg-micro {
  font-size: var(--fs-micro);
  color: var(--rg-fg-faint);
  letter-spacing: var(--tr-wide);
}

/* Inline code */
code, .rg-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--rg-cream-300);
  padding: 0.1em 0.4em;
  border-radius: var(--r-xs);
  color: var(--rg-clay-700);
}

/* Links */
a, .rg-link {
  color: var(--rg-fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--rg-clay-500);
  transition: text-decoration-thickness var(--dur-fast) var(--ease-soft);
}
a:hover, .rg-link:hover {
  text-decoration-thickness: 2px;
}

/* Focus — visible everywhere */
:focus-visible {
  outline: 2px solid var(--rg-turq-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}