/* ============================================================
   Wedding Design System — Tokens
   Drop this file into any HTML page with:
     <link rel="stylesheet" href="colors_and_type.css">

   Token names mirror the spec verbatim so they're searchable.
   Aeonik Pro is substituted with Inter Tight (Google Fonts).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND ---------- */
  --cobalt-violet:    #494fdf;
  --cobalt-bright:    #4f55f1;
  --cobalt-deep:      #3a40c4;
  --on-primary:       #ffffff;

  /* ---------- SURFACE ---------- */
  --canvas-light:     #ffffff;
  --canvas-dark:      #000000;
  --surface-soft:     #f4f4f4;
  --surface-deep:     #0a0a0a;
  --surface-elevated: #16181a;
  --hairline-light:   #e2e2e7;
  --hairline-strong:  #191c1f;

  /* ---------- TEXT ---------- */
  --ink:        #191c1f;   /* primary text */
  --body:       #1f2226;   /* long-form body */
  --charcoal:   #3a3d40;   /* captions */
  --mute:       #505a63;   /* supporting */
  --ash:        #5c5e60;   /* footer */
  --stone:      #8d969e;   /* metadata */
  --faint:      #c9c9cd;   /* disabled */
  --on-dark:    #ffffff;

  /* ---------- PRODUCT ACCENTS ---------- */
  --teal:        #00a87e;
  --light-blue:  #007bc2;
  --blue-link:   #376cd5;
  --light-green: #428619;
  --green-text:  #006400;
  --yellow:      #b09000;
  --warning:     #ec7e00;
  --deep-pink:   #e61e49;
  --danger:      #e23b4a;
  --deep-red:    #8b0000;
  --brown:       #936d62;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Inter Tight", "Aeonik Pro", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* ---------- SPACING (4px base) ---------- */
  --space-xxs:   4px;
  --space-xs:    6px;
  --space-sm:    8px;
  --space-md:    14px;
  --space-lg:    16px;
  --space-xl:    24px;
  --space-xxl:   32px;
  --space-xxxl:  48px;
  --space-block: 80px;
  --space-section: 88px;
  --space-band: 120px;

  /* ---------- RADII ---------- */
  --radius-none: 0;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ---------- DURATIONS / EASING ---------- */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 480ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  background: var(--canvas-light);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- DISPLAY RAMP ---------- */
.display-xxl { font-family: var(--font-display); font-weight: 500; font-size: 136px; line-height: 1.0;  letter-spacing: -2.72px; }
.display-xl  { font-family: var(--font-display); font-weight: 500; font-size: 80px;  line-height: 1.0;  letter-spacing: -0.8px;  }
.display-lg  { font-family: var(--font-display); font-weight: 500; font-size: 48px;  line-height: 1.21; letter-spacing: -0.48px; }
.display-md  { font-family: var(--font-display); font-weight: 500; font-size: 40px;  line-height: 1.2;  letter-spacing: -0.4px;  }

/* ---------- HEADINGS ---------- */
/* Bare h1/h2 inherit color so dark canvas sections get white text naturally.
   Use .heading-lg / .heading-md when you need the ink default explicitly. */
h1              { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 1.19; letter-spacing: -0.32px; margin: 0; color: inherit; }
h2              { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.33; margin: 0; color: inherit; }
.heading-lg     { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 1.19; letter-spacing: -0.32px; color: var(--ink); }
.heading-md     { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.33; color: var(--ink); }

/* ---------- BODY ---------- */
.body-lg      { font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 1.56; letter-spacing: -0.09px; color: var(--body); }
.body-md, p   { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.5;  letter-spacing: 0.24px;  color: var(--body); margin: 0; }
.body-md-bold { font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.5;  letter-spacing: 0.16px;  color: var(--ink);  }
.body-sm, small, caption { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.43; color: var(--charcoal); }
.caption      { font-family: var(--font-body); font-weight: 400; font-size: 13px; line-height: 1.4; color: var(--mute); }

/* ---------- BUTTONS ---------- */
.button-lg  { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.4; }
.button-md  { font-family: var(--font-body);    font-weight: 600; font-size: 16px; line-height: 1.5; letter-spacing: 0.24px; }
.button-sm  { font-family: var(--font-body);    font-weight: 600; font-size: 14px; line-height: 1.43; letter-spacing: 0.16px; }

/* ---------- LINKS ---------- */
a, .link {
  color: var(--blue-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover, .link:hover {
  color: var(--cobalt-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-on-dark { color: var(--light-blue); }
.link-on-dark:hover { color: var(--cobalt-bright); }

/* ============================================================
   BUTTON COMPONENTS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-sm);
  border: 0; cursor: pointer;
  border-radius: var(--radius-full);
  padding: 14px 24px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px; letter-spacing: 0.24px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform 80ms var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.99); }

.btn-primary        { background: #ffffff; color: var(--ink); }
.btn-primary:hover  { background: #ededed; }
.btn-primary-pressed{ background: #d9d9d9; color: var(--ink); }

.btn-dark           { background: var(--ink); color: #fff; }
.btn-dark:hover     { background: #000; }

.btn-cobalt         { background: var(--cobalt-violet); color: #fff; }
.btn-cobalt:hover   { background: var(--cobalt-bright); }
.btn-cobalt:active  { background: var(--cobalt-deep); }

.btn-soft           { background: var(--surface-soft); color: var(--ink); }
.btn-soft:hover     { background: #e8e8e8; }

.btn-outline-light  { background: transparent; color: var(--ink);    box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.btn-outline-light:hover { background: var(--surface-soft); }

.btn-outline-dark   { background: transparent; color: #fff;          box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); }
.btn-outline-dark:hover { background: rgba(255,255,255,0.08); }

.btn-sm             { padding: 8px 14px; font-size: 14px; }

/* ============================================================
   CARD COMPONENTS
   ============================================================ */
.card {
  background: #fff;
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.card:hover { transform: translateY(-1px); border-color: var(--hairline-strong); }

.card-dark {
  background: var(--surface-elevated);
  color: #fff;
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.card-featured {
  background: var(--cobalt-violet);
  color: #fff;
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--charcoal); letter-spacing: 0.16px;
}
.field input,
.field select,
.field textarea {
  height: 56px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline-light);
  background: #fff;
  padding: 0 18px;
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { height: auto; padding: 14px 18px; resize: vertical; }
.field input::placeholder { color: var(--stone); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--cobalt-violet);
  box-shadow: 0 0 0 4px rgba(73, 79, 223, 0.12);
}

/* Segmented control */
.segment {
  display: inline-flex; padding: 4px;
  background: var(--surface-soft);
  border-radius: var(--radius-full);
}
.segment button {
  border: 0; background: transparent; cursor: pointer;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  color: var(--mute);
}
.segment button[aria-selected="true"] {
  background: #fff; color: var(--ink);
}

/* ============================================================
   UTIL
   ============================================================ */
.surface-light { background: var(--canvas-light); color: var(--ink); }
.surface-dark  { background: var(--canvas-dark); color: var(--on-dark); }
.hairline      { border-bottom: 1px solid var(--hairline-light); }
.hairline-dark { border-bottom: 1px solid rgba(255,255,255,0.10); }