/* =========================================================================
   Amberroad Design System — colors_and_type.css
   Dark-first system. Single amber-gradient accent. Inter + Playfair Display
   (Ivy Presto substitute) loaded from Google Fonts.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ---------- Color: Surfaces (dark, near-black, stepped) ---------- */
  --color-midnight-ink:      #000000;   /* page base */
  --color-obsidian-surface:  #030304;   /* very subtle lift */
  --color-charcoal-canvas:   #08080a;   /* primary content surface */
  --color-pewter-accent:     #121317;   /* cards, interactive bg */
  --color-slate-gray:        #1c1d22;   /* card hover, deeper surfaces */

  /* ---------- Color: Text (5-stop scale) ---------- */
  --color-ash-text:          #5e616e;   /* muted / placeholder */
  --color-stone-text:        #777a88;   /* tertiary */
  --color-silver-text:       #acafb9;   /* helper / icons */
  --color-porcelain-text:    #cdcdcd;   /* secondary body */
  --color-white-frost:       #e2e3e9;   /* default body */
  --color-pure-white:        #ffffff;   /* primary heading / CTA */

  /* ---------- Color: Amber accent (the brand's only color) ---------- */
  --color-amber-deep:        #ae9357;   /* gradient stop 0/2 */
  --color-amber-light:       #fff0cc;   /* gradient stop 1 (highlight) */
  --color-amber-warm:        #cc9166;   /* solo flat amber (rare use) */
  --color-amber-fade:        rgba(189, 157, 79, 0); /* gradient stop 3 (fade-out) */

  --gradient-amber: linear-gradient(
    103deg,
    var(--color-amber-deep) 0%,
    var(--color-amber-light) 40%,
    var(--color-amber-deep) 70%,
    var(--color-amber-fade) 100%
  );

  --gradient-amber-sheen: linear-gradient(
    110deg,
    #ae9357 0%,
    #f7e3a4 30%,
    #fff0cc 50%,
    #f7e3a4 70%,
    #ae9357 100%
  );

  /* ---------- Color: Status (sparingly used) ---------- */
  --color-success: #4ea672;
  --color-warning: #cc9166;
  --color-danger:  #c2554a;

  /* ---------- Type: families ---------- */
  --font-display: 'Playfair Display', 'Ivy Presto', ui-serif, Georgia, serif;
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type: weight tokens ---------- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- Type: scale ---------- */
  --text-caption:        12px;
  --leading-caption:     1.5;
  --tracking-caption:    -0.007px;

  --text-body-sm:        14px;
  --leading-body-sm:     1.43;
  --tracking-body-sm:    -0.013px;

  --text-body:           16px;
  --leading-body:        1.5;
  --tracking-body:       -0.02px;

  --text-subheading:     20px;
  --leading-subheading:  1.33;
  --tracking-subheading: -0.022px;

  --text-heading:        32px;
  --leading-heading:     1.2;
  --tracking-heading:    -0.025em;

  --text-heading-lg:     48px;
  --leading-heading-lg:  1.1;
  --tracking-heading-lg: -0.03em;

  --text-display:        72px;
  --leading-display:     1.05;
  --tracking-display:    -0.02em;

  --text-display-xl:     96px;
  --leading-display-xl:  1.0;
  --tracking-display-xl: -0.025em;

  /* ---------- Spacing scale ---------- */
  --space-4:   4px;
  --space-6:   6px;
  --space-8:   8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-105: 105px;
  --space-160: 160px;
  --space-224: 224px;

  /* ---------- Layout ---------- */
  --page-max:      1216px;
  --section-gap:   160px;
  --card-padding:  32px;
  --element-gap:   6px;
  --nav-offset:    24px;       /* distance from viewport top */
  --nav-radius:    9999px;

  /* ---------- Radii ---------- */
  --radius-none: 0px;
  --radius-sm:    2px;
  --radius-xs:    6px;   /* small inner panels nested inside a 10/16 container */
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   20px;   /* large containers — journey rail, detail panels */
  --radius-pill: 9999px;

  /* ---------- Borders ---------- */
  --border-hairline: 1px solid rgba(255, 255, 255, 0.08);
  --border-strong:   1px solid var(--color-white-frost);
  --border-divider:  1px solid var(--color-slate-gray);

  /* ---------- Elevation (used sparingly — only on the floating nav) ---------- */
  --shadow-float:    0 8px 40px rgba(0, 0, 0, 0.6);
  --shadow-glass:    0 1px 0 rgba(255, 255, 255, 0.04) inset;

  /* ---------- Motion ---------- */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  600ms;
  --dur-loop:  30s;            /* customer-logo marquee */
}

/* =========================================================================
   Base + semantic resets
   ========================================================================= */

html, body {
  background: var(--color-midnight-ink);
  color: var(--color-white-frost);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =========================================================================
   Semantic type — drop-in classes
   ========================================================================= */

.t-display-xl,
.t-display,
.t-h1,
.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  color: var(--color-pure-white);
  text-wrap: balance;
}

.t-display-xl {
  font-size: var(--text-display-xl);
  line-height: var(--leading-display-xl);
  letter-spacing: var(--tracking-display-xl);
}

.t-display {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.t-h1 {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
}

.t-h2 {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  color: var(--color-pure-white);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-white-frost);
}

.t-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
  color: var(--color-porcelain-text);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-silver-text);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-body-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-silver-text);
}

.t-italic {
  font-style: italic;
}

/* =========================================================================
   Utility — surfaces & accents
   ========================================================================= */

.surface-0 { background: var(--color-midnight-ink); }
.surface-1 { background: var(--color-obsidian-surface); }
.surface-2 { background: var(--color-charcoal-canvas); }
.surface-3 { background: var(--color-pewter-accent); }
.surface-4 { background: var(--color-slate-gray); }

.amber-text {
  background: var(--gradient-amber);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.amber-rule {
  height: 1px;
  width: 64px;
  background: var(--gradient-amber);
  display: block;
}