/* ============================================================================
   Uzman Adres Design System — Foundations
   --------------------------------------------------------------------------
   Direction: Apple / Stripe — minimal, clean, generous whitespace, restrained
   palette. Brand accent comes from the official logo (#E5A84A amber).
   --------------------------------------------------------------------------
   Import this from any artifact:
   <link rel="stylesheet" href="colors_and_type.css" />

   Fonts: DM Sans (substitute for Google Sans — Google Sans is not on Google
   Fonts; DM Sans is the closest free, public-domain match in geometry & feel).
   Plus DM Mono for code & tabular figures.
   FLAG: replace with Google Sans / Product Sans .woff2 files if you can ship
   them; just change the @import + --font-* vars.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ── Brand & surfaces ──────────────────────────────────────────────────── */
  --surface:        #FFFFFF;   /* page bg — clean white */
  --surface-2:      #F6F9FC;   /* recessed section bg, à la Stripe */
  --card:           #FFFFFF;   /* cards */
  --ink:            #0A2540;   /* deep navy — primary text & brand */
  --brand:          #0A2540;   /* same as ink — Apple-style mono brand */
  --accent:         #E5A84A;   /* amber from logo */
  --border:         #E6EBF1;   /* hairline */
  --border-strong:  #D0D8E0;
  --muted:          #425466;   /* secondary text */
  --muted-2:        #697386;   /* tertiary */

  /* ── Ink scale (warm navy neutrals) ────────────────────────────────────── */
  --ink-50:   #F7FAFC;
  --ink-100:  #EDF2F7;
  --ink-200:  #E3E8EF;
  --ink-300:  #CBD5E0;
  --ink-400:  #A0AEC0;
  --ink-500:  #718096;
  --ink-600:  #4A5568;
  --ink-700:  #2D3748;
  --ink-800:  #1A2740;
  --ink-900:  #0A2540;

  /* ── Brand scale (deep navy) ───────────────────────────────────────────── */
  --brand-50:   #EEF2F8;
  --brand-100:  #D5DFEC;
  --brand-200:  #A8BBD4;
  --brand-300:  #7997BC;
  --brand-400:  #4F73A0;
  --brand-500:  #2A5184;
  --brand-600:  #0A2540;
  --brand-700:  #081C32;
  --brand-800:  #061525;
  --brand-900:  #040E1A;

  /* ── Accent scale (amber from logo) ────────────────────────────────────── */
  --accent-50:   #FDF6E6;
  --accent-100:  #FAE7BA;
  --accent-200:  #F4D589;
  --accent-300:  #EFC15F;
  --accent-400:  #E9B252;
  --accent-500:  #E5A84A;   /* base = brand accent */
  --accent-600:  #C68B33;
  --accent-700:  #9B6B22;
  --accent-800:  #6F4C14;
  --accent-900:  #432D0A;

  /* ── Stripe-style secondary action color (sky/blurple) ─────────────────── */
  --link:        #635BFF;
  --link-hover:  #4D44F0;

  /* ── Semantic state colors ─────────────────────────────────────────────── */
  --success:       #198754;
  --success-bg:    #E8F5EE;
  --warning:       #B45309;
  --warning-bg:    #FFF7E5;
  --danger:        #CD3D64;
  --danger-bg:     #FDEEF1;
  --info:          #3B5BDB;
  --info-bg:       #EEF1FD;

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;

  /* Type scale — fluid */
  --fs-eyebrow:    12px;
  --fs-caption:    12px;
  --fs-small:      14px;
  --fs-body:       16px;
  --fs-body-lg:    18px;
  --fs-h6:         17px;
  --fs-h5:         19px;
  --fs-h4:         clamp(22px, 2.4vw, 26px);
  --fs-h3:         clamp(26px, 3vw,   32px);
  --fs-h2:         clamp(34px, 4.4vw, 48px);
  --fs-h1:         clamp(44px, 6vw,   72px);
  --fs-display:    clamp(60px, 9vw,   112px);

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  --tracking-tight:   -0.025em;
  --tracking-tighter: -0.03em;
  --tracking-normal:   0em;
  --tracking-wide:     0.06em;
  --tracking-eyebrow:  0.08em;

  /* ── Spacing (8px base) ────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ── Radii ─────────────────────────────────────────────────────────────── */
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    12px;
  --r-xl:    16px;
  --r-2xl:   20px;
  --r-full:  9999px;     /* avatars / pill badges only — never primary buttons */

  /* ── Borders ───────────────────────────────────────────────────────────── */
  --bw:      1px;
  --b-hair:  1px solid var(--border);

  /* ── Shadows — Stripe-style soft, layered ──────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(10, 37, 64, 0.05);
  --shadow-sm:   0 2px 6px rgba(10, 37, 64, 0.05), 0 1px 2px rgba(10, 37, 64, 0.04);
  --shadow-md:   0 4px 12px rgba(10, 37, 64, 0.06), 0 2px 4px rgba(10, 37, 64, 0.04);
  --shadow-lg:   0 12px 32px rgba(10, 37, 64, 0.08), 0 4px 8px rgba(10, 37, 64, 0.04);
  --shadow-xl:   0 24px 64px rgba(10, 37, 64, 0.12), 0 8px 16px rgba(10, 37, 64, 0.05);
  /* Accent glow for primary CTAs */
  --shadow-accent: 0 4px 14px rgba(229, 168, 74, 0.35);

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    150ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --container:   1200px;
  --container-narrow: 920px;
  --container-wide:   1320px;
  --nav-h:       72px;
}

/* ============================================================================
   Reset + base
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { margin: 0; font-size: var(--fs-body); line-height: var(--lh-relaxed); }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

/* ============================================================================
   Semantic typography
   ============================================================================ */

.h-display, h1.display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--ink);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0 0 var(--space-3);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
h6, .h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h6);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--muted);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
.p-lg { font-size: var(--fs-body-lg); line-height: 1.6; color: var(--muted); }
.p-sm { font-size: var(--fs-small); }
.muted { color: var(--muted); }
.muted-2 { color: var(--muted-2); }

/* Eyebrow label — DM Mono, uppercase, amber */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-600);
}

/* Mono / code */
code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "tnum";
}
code {
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-sm);
  padding: 1px 6px;
}

/* Number / stat treatment */
.num, .stat {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Links — Stripe-style violet */
a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

::selection { background: var(--accent-200); color: var(--ink); }

/* ============================================================================
   Layout & utility
   ============================================================================ */

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--space-5); }
.container-wide { max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--space-5); }

/* Cards — soft shadow, no heavy borders */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-6) var(--space-6);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ============================================================================
   Buttons — Apple-style pill primary, Stripe-style soft secondary
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1;
  padding: 12px 22px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink-800); color: #fff; text-decoration: none; }

.btn-accent { background: var(--accent); color: var(--ink); box-shadow: var(--shadow-accent); }
.btn-accent:hover { background: var(--accent-400); color: var(--ink); text-decoration: none; transform: translateY(-1px); }

.btn-secondary {
  background: #fff; color: var(--ink); border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-2); border-color: var(--ink-300); text-decoration: none; color: var(--ink); }

.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink-50); text-decoration: none; color: var(--ink); }

.btn-link { background: transparent; color: var(--link); padding: 8px 4px; }
.btn-link:hover { color: var(--link-hover); }

.btn-sm { padding: 8px 16px; font-size: var(--fs-small); }
.btn-lg { padding: 16px 28px; font-size: var(--fs-body-lg); border-radius: var(--r-md); }

/* ============================================================================
   Badge / pill
   ============================================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--ink-50);
  color: var(--ink-700);
  border: 1px solid var(--ink-100);
}
.badge-accent  { background: var(--accent-50); color: var(--accent-700); border-color: var(--accent-100); }
.badge-brand   { background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-100); }
.badge-success { background: var(--success-bg); color: var(--success); border-color: #C8E6D5; }
.badge-warning { background: var(--warning-bg); color: var(--warning); border-color: #FDE68A; }
.badge-danger  { background: var(--danger-bg);  color: var(--danger);  border-color: #F8C8D4; }

/* ============================================================================
   Section helpers
   ============================================================================ */

.section { padding: var(--space-10) 0; }
.section-tight { padding: var(--space-9) 0; }
.section-loose { padding: var(--space-11) 0; }
.section-recessed { background: var(--surface-2); }
.section-dark { background: var(--ink); color: #fff; }
.section-dark p, .section-dark .muted { color: rgba(255,255,255,0.72); }

/* Focus utility */
.focusable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }