/* =============================================================
   Diamond Standard Cleaning — Color & Type Tokens
   ============================================================= */

/* ---- Webfonts (Google Fonts — flagged substitutions) ---- */
/* Display: Cormorant Garamond  (sharp, faceted serif — diamond feel)
   Body:    Manrope            (humanist sans, friendly + modern)
   Mono:    JetBrains Mono     (utility, only used in dev/admin) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */

  /* Gold — pulled from the logo. The hero brand color, used sparingly. */
  --gold-50:  #FBF6E7;
  --gold-100: #F4E9C2;
  --gold-200: #E9D595;
  --gold-300: #DCBE65;
  --gold-400: #CFA948;   /* Primary gold */
  --gold-500: #B88C2F;   /* Gold pressed / hover */
  --gold-600: #8F6A1E;
  --gold-700: #614714;

  /* Midnight — the contract / commitment color. Backgrounds, type. */
  --midnight-50:  #EEF1F7;
  --midnight-100: #D3D9E6;
  --midnight-200: #A6B0C9;
  --midnight-300: #6D7B9C;
  --midnight-400: #3F4E6F;
  --midnight-500: #1E2A47;
  --midnight-600: #131D36;   /* Primary midnight */
  --midnight-700: #0B1428;
  --midnight-800: #060B1A;
  --midnight-900: #03060F;

  /* Bone — warm off-white. Backgrounds, surfaces. */
  --bone-50:  #FBFAF6;
  --bone-100: #F6F3EA;   /* Primary surface */
  --bone-200: #ECE7D6;
  --bone-300: #DCD4BC;

  /* Ink — neutral text + grays */
  --ink-900: #0E1117;
  --ink-800: #1A1E27;
  --ink-700: #2D333F;
  --ink-600: #4B5364;
  --ink-500: #6B7587;
  --ink-400: #95A0B2;
  --ink-300: #C2C9D6;
  --ink-200: #E2E6ED;
  --ink-100: #F1F3F7;
  --ink-50:  #F8F9FB;
  --white:   #FFFFFF;

  /* ---------- SEMANTIC COLORS ---------- */
  --success-500: #2E8B57;   /* "Clean complete" — sage green */
  --success-100: #DDEFE3;
  --warning-500: #C8861B;   /* Pending / needs attention */
  --warning-100: #FAEBC8;
  --danger-500:  #B23A3A;   /* Cancellation / issue */
  --danger-100:  #F5DADA;
  --info-500:    #2E5C8B;
  --info-100:    #D6E3EF;

  /* ---------- SURFACE / FG SEMANTIC ---------- */
  --bg-page:     var(--bone-100);
  --bg-surface:  var(--white);
  --bg-elevated: var(--white);
  --bg-inverse:  var(--midnight-600);
  --bg-accent:   var(--gold-400);

  --fg-1: var(--midnight-700);    /* Primary text */
  --fg-2: var(--ink-600);         /* Secondary text */
  --fg-3: var(--ink-500);         /* Tertiary / captions */
  --fg-4: var(--ink-400);         /* Disabled / placeholders */
  --fg-inverse: var(--bone-100);
  --fg-accent:  var(--gold-500);  /* Gold readable on bone */
  --fg-link:    var(--midnight-600);

  --border-1: var(--ink-200);     /* Default border */
  --border-2: var(--ink-300);     /* Emphasis border */
  --border-strong: var(--midnight-600);
  --border-gold: var(--gold-400);

  /* ---------- ELEVATION / SHADOWS ---------- */
  /* The system favors crisp, hairline borders over heavy shadows.
     Shadows are tight + low-spread — clean, not dramatic. */
  --shadow-xs: 0 1px 0 rgba(19, 29, 54, 0.04);
  --shadow-sm: 0 1px 2px rgba(19, 29, 54, 0.06), 0 1px 1px rgba(19, 29, 54, 0.04);
  --shadow-md: 0 2px 6px rgba(19, 29, 54, 0.08), 0 1px 2px rgba(19, 29, 54, 0.05);
  --shadow-lg: 0 12px 24px -8px rgba(19, 29, 54, 0.14), 0 4px 8px -4px rgba(19, 29, 54, 0.08);
  --shadow-xl: 0 24px 48px -16px rgba(19, 29, 54, 0.20);
  --shadow-gold: 0 8px 24px -8px rgba(207, 169, 72, 0.45);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---------- RADII ---------- */
  /* The system uses subtle radii (cards, inputs) and 0 (diamond panels).
     Never pill/full-rounded — except on pill badges + avatars. */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;     /* Default for inputs / cards */
  --radius-4: 12px;
  --radius-5: 20px;
  --radius-pill: 999px;

  /* ---------- SPACING (8pt grid, with 2/4 micro steps) ---------- */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;
  --space-11: 128px;

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-extrabold: 800;

  /* Type scale — sized for legibility without wrapping on mid-width pages */
  --text-display-1: 72px;   /* Hero, marketing */
  --text-display-2: 56px;
  --text-h1:        40px;
  --text-h2:        32px;
  --text-h3:        26px;
  --text-h4:        20px;
  --text-h5:        17px;
  --text-body-lg:   18px;
  --text-body:      16px;
  --text-body-sm:   14px;
  --text-caption:   12px;
  --text-eyebrow:   11px;   /* All-caps tracking labels */

  /* Line heights */
  --lh-display: 1.05;
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Tracking */
  --track-eyebrow: 0.16em;
  --track-tight:   -0.02em;
  --track-display: -0.015em;
  --track-normal:  0;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1240px;
  --container-pad: clamp(20px, 4vw, 48px);
}

/* =============================================================
   SEMANTIC TYPE RULES — drop on top of any page to get
   on-brand defaults. Use the .ds- classes for specifics.
   ============================================================= */

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

.ds-display-1, .ds-display-2, h1, h2, h3, .ds-h1, .ds-h2, .ds-h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  color: var(--fg-1);
  text-wrap: balance;
}

.ds-display-1 { font-size: var(--text-display-1); font-weight: 500; }
.ds-display-2 { font-size: var(--text-display-2); font-weight: 500; }

h1, .ds-h1 { font-size: var(--text-h1); line-height: var(--lh-tight); }
h2, .ds-h2 { font-size: var(--text-h2); line-height: var(--lh-tight); }
h3, .ds-h3 { font-size: var(--text-h3); line-height: var(--lh-snug);  }

h4, .ds-h4 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}

h5, .ds-h5 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h5);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

p, .ds-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.ds-body-lg { font-size: var(--text-body-lg); line-height: var(--lh-relaxed); }
.ds-body-sm { font-size: var(--text-body-sm); line-height: var(--lh-normal); }
.ds-caption { font-size: var(--text-caption); color: var(--fg-3); line-height: var(--lh-normal); }

.ds-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--fg-accent);
}

.ds-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

code, .ds-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-100);
  padding: 2px 6px;
  border-radius: var(--radius-1);
  color: var(--ink-800);
}

a, .ds-link {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--gold-400);
  transition: color var(--dur-fast) var(--ease-std);
}
a:hover, .ds-link:hover { color: var(--gold-500); }

/* Numeric tabular for prices / time slots */
.ds-tnum { font-variant-numeric: tabular-nums; }