/* =========================================================
   Fonts — Aaron & Tara Dating
   ---------------------------------------------------------
   Webfonts are loaded from Google Fonts (no binaries were
   provided for this brand). If you want a fully self-hosted,
   offline design system, drop the .woff2 files into
   /assets/fonts and replace these @import lines with local
   @font-face rules.

   Display : Cormorant Garamond  — elegant, romantic, artful
   Body    : Mulish              — warm humanist sans, friendly
   Script  : Caveat              — handwritten love-note accent
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Caveat:wght@400;500;600;700&display=swap");
/* =========================================================
   Colors — Aaron & Tara Dating
   ---------------------------------------------------------
   The palette is built from the two people it belongs to:

     Mauve   — Tara's color. The heart of the brand. PRIMARY.
     Blue    — Aaron's color. Calm, steady. SECONDARY.
     Brown   — Aaron's color. Warm, grounding. ACCENT / neutral warmth.

   Mauve leads, blue answers, brown holds them together —
   two people, one warm story. Everything sits on warm paper,
   never pure white, never cold grey.
   ========================================================= */

:root {
  /* ---- Mauve — Tara · primary ---------------------------- */
  --mauve-50:  #F7EFF4;
  --mauve-100: #EEDFE9;
  --mauve-200: #DCC0D2;
  --mauve-300: #C7A0BC;
  --mauve-400: #B081A4;
  --mauve-500: #9A6A8E;   /* brand mauve */
  --mauve-600: #815573;
  --mauve-700: #67435C;
  --mauve-800: #4D3245;
  --mauve-900: #382433;

  /* ---- Blue — Aaron · secondary -------------------------- */
  --blue-50:  #EDF1F8;
  --blue-100: #DAE2F0;
  --blue-200: #B7C6E0;
  --blue-300: #8FA6CC;
  --blue-400: #6A86B5;
  --blue-500: #4F6D9A;   /* brand blue (dusty denim) */
  --blue-600: #3F587E;
  --blue-700: #314563;
  --blue-800: #243349;
  --blue-900: #1A2536;

  /* ---- Brown — Aaron · warm accent ----------------------- */
  --brown-50:  #F5EEE7;
  --brown-100: #EADDCF;
  --brown-200: #D8C3AC;
  --brown-300: #C2A488;
  --brown-400: #A98567;
  --brown-500: #8A6A4F;   /* brand brown */
  --brown-600: #6F543E;
  --brown-700: #574230;
  --brown-800: #3F2F22;

  /* ---- Warm neutrals (paper + ink) ----------------------- */
  --paper:     #F8F2EC;   /* app background — warm cream */
  --paper-dim: #F1E9E0;   /* recessed surfaces */
  --linen:     #FDFAF6;   /* raised cards */
  --white:     #FFFFFF;

  --ink-900:   #2C2330;   /* primary text — deep plum-brown */
  --ink-700:   #4A3F4C;
  --ink-500:   #6E6068;   /* muted / secondary text */
  --ink-300:   #9A8F95;   /* placeholder / disabled text */
  --ink-200:   #C8BEC4;   /* hairline on dark */

  --line:      #E4D8CF;   /* default warm hairline border */
  --line-soft: #EFE6DD;

  /* ---- Semantic state colors (muted, on-brand) ----------- */
  --green-100: #DCEBDF;
  --green-500: #5E8C6A;   /* success / "we did it" */
  --green-700: #3F6149;

  --amber-100: #F4E6CF;
  --amber-500: #C99750;   /* warning / upcoming-soon */
  --amber-700: #936A2F;

  --rose-100:  #F2D9DD;
  --rose-500:  #B85C6A;   /* danger / cancelled */
  --rose-700:  #8A3F4B;

  /* =======================================================
     Semantic aliases — use these in components, not raws.
     ======================================================= */

  /* surfaces & background */
  --bg:             var(--paper);
  --surface:        var(--linen);
  --surface-raised: var(--white);
  --surface-sunken: var(--paper-dim);
  --surface-mauve:  var(--mauve-50);
  --surface-blue:   var(--blue-50);
  --surface-brown:  var(--brown-50);

  /* text */
  --text:           var(--ink-900);
  --text-muted:     var(--ink-500);
  --text-subtle:    var(--ink-300);
  --text-on-color:  var(--linen);
  --text-link:      var(--mauve-600);

  /* brand roles */
  --primary:        var(--mauve-500);
  --primary-hover:  var(--mauve-600);
  --primary-press:  var(--mauve-700);
  --primary-soft:   var(--mauve-100);
  --on-primary:     #FFFFFF;

  --secondary:        var(--blue-500);
  --secondary-hover:  var(--blue-600);
  --secondary-soft:   var(--blue-100);
  --on-secondary:     #FFFFFF;

  --accent:         var(--brown-500);
  --accent-soft:    var(--brown-100);
  --on-accent:      #FFFFFF;

  /* him & her — for "two people" tagging in the product */
  --tara:           var(--mauve-500);
  --tara-soft:      var(--mauve-100);
  --aaron:          var(--blue-500);
  --aaron-soft:     var(--blue-100);
  --together:       var(--brown-500);

  /* lines & focus */
  --border:         var(--line);
  --border-soft:    var(--line-soft);
  --focus-ring:     var(--mauve-400);

  /* states */
  --success:        var(--green-500);
  --success-soft:   var(--green-100);
  --warning:        var(--amber-500);
  --warning-soft:   var(--amber-100);
  --danger:         var(--rose-500);
  --danger-soft:    var(--rose-100);

  /* the "two coming together" gradient — used sparingly,
     for the logo lockup, hero washes, and celebratory moments */
  --gradient-union: linear-gradient(115deg, var(--mauve-500) 0%, var(--brown-400) 52%, var(--blue-500) 100%);
  --gradient-paper: linear-gradient(180deg, var(--paper) 0%, var(--mauve-50) 100%);
}
/* =========================================================
   Typography — Aaron & Tara Dating
   ---------------------------------------------------------
   Three voices:
     Display  Cormorant Garamond — section titles, hero lines,
              date names. Set it LARGE and let the contrast sing.
     Body     Mulish — everything you actually read. Warm, plain.
     Script   Caveat — handwritten accents only: signatures,
              little asides, "date #14", margin notes. Never body.
   ========================================================= */

:root {
  /* ---- families ----------------------------------------- */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body:    "Mulish", "Segoe UI", system-ui, sans-serif;
  --font-script:  "Caveat", "Segoe Script", cursive;

  /* ---- weights ------------------------------------------ */
  --fw-light:     300;   /* @kind font */
  --fw-regular:   400;   /* @kind font */
  --fw-medium:    500;   /* @kind font */
  --fw-semibold:  600;   /* @kind font */
  --fw-bold:      700;   /* @kind font */
  --fw-extrabold: 800;   /* @kind font */

  /* ---- type scale (mobile-first, rem on 16px root) ------- */
  --text-2xs:   0.6875rem;  /* 11px — eyebrow micro labels */
  --text-xs:    0.75rem;    /* 12px — captions, meta */
  --text-sm:    0.875rem;   /* 14px — secondary body, UI */
  --text-base:  1rem;       /* 16px — body default */
  --text-md:    1.125rem;   /* 18px — lead body */
  --text-lg:    1.375rem;   /* 22px — card titles */
  --text-xl:    1.75rem;    /* 28px — subsection display */
  --text-2xl:   2.25rem;    /* 36px — screen titles */
  --text-3xl:   3rem;       /* 48px — hero */
  --text-4xl:   4rem;       /* 64px — splash / numerals */

  /* ---- line heights ------------------------------------- */
  --leading-tight:   1.08;  /* big display */
  --leading-snug:    1.22;  /* headings */
  --leading-normal:  1.5;   /* body */
  --leading-relaxed: 1.65;  /* long reading */

  /* ---- letter spacing ----------------------------------- */
  --tracking-tight:  -0.02em;  /* large display */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.16em;  /* uppercase eyebrows */

  /* ---- semantic role tokens ----------------------------- */
  --font-heading: var(--font-display);
  --font-text:    var(--font-body);
}

/* =========================================================
   Optional helper classes — convenient text roles.
   Components style themselves; these are for prose/markup.
   ========================================================= */

.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.t-title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--text);
}

.t-script {
  font-family: var(--font-script);
  font-weight: var(--fw-600, 600);
  color: var(--primary);
  line-height: 1;
}

.t-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text);
}

.t-meta {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
/* =========================================================
   Spacing, sizing & radii — Aaron & Tara Dating
   ---------------------------------------------------------
   4px base grid. Mobile-first: touch targets never below 44px.
   Radii are generously soft — this brand is warm, not boxy.
   ========================================================= */

:root {
  /* ---- spacing scale (4px grid) ------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-7:   2rem;     /* 32 */
  --space-8:   2.5rem;   /* 40 */
  --space-9:   3rem;     /* 48 */
  --space-10:  4rem;     /* 64 */
  --space-12:  6rem;     /* 96 */

  /* ---- semantic spacing --------------------------------- */
  --gap-inline:   var(--space-2);  /* between inline siblings */
  --gap-tight:    var(--space-3);
  --gap:          var(--space-4);  /* default stack gap */
  --gap-loose:    var(--space-6);
  --section-gap:  var(--space-9);  /* between page sections */

  --pad-card:     var(--space-5);
  --pad-screen:   var(--space-5);  /* mobile screen side padding */

  /* ---- radii (soft & warm) ------------------------------ */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;   /* default — inputs, small cards */
  --radius-lg:   20px;   /* cards */
  --radius-xl:   28px;   /* feature cards, sheets */
  --radius-2xl:  36px;
  --radius-pill: 999px;  /* chips, avatars, primary buttons */
  --radius-blob: 62% 38% 54% 46% / 56% 48% 52% 44%; /* organic photo frame */

  /* ---- sizing ------------------------------------------- */
  --tap-min:     44px;   /* minimum touch target */
  --control-sm:  36px;
  --control-md:  44px;   /* default control height */
  --control-lg:  52px;

  --avatar-sm:   28px;
  --avatar-md:   40px;
  --avatar-lg:   64px;
  --avatar-xl:   96px;

  --icon-sm:     16px;
  --icon-md:     20px;
  --icon-lg:     24px;

  /* ---- layout ------------------------------------------- */
  --screen-max:  430px;  /* mobile-first canvas width */
  --content-max: 1100px; /* web reading width */
  --header-h:    60px;
  --tabbar-h:    72px;
}
/* =========================================================
   Effects — shadows, borders, blur, motion
   Aaron & Tara Dating
   ---------------------------------------------------------
   Shadows are warm-tinted (plum/brown), never neutral grey,
   and always soft. Motion is gentle and a touch springy —
   playful, never bouncy-cartoon.
   ========================================================= */

:root {
  /* ---- elevation (warm-tinted, soft) -------------------- */
  --shadow-xs:  0 1px 2px rgba(58, 36, 51, 0.06);
  --shadow-sm:  0 2px 8px rgba(58, 36, 51, 0.07);
  --shadow-md:  0 6px 18px rgba(58, 36, 51, 0.10);
  --shadow-lg:  0 14px 34px rgba(58, 36, 51, 0.13);
  --shadow-xl:  0 24px 56px rgba(58, 36, 51, 0.16);

  /* colored glows — for primary buttons / active states */
  --shadow-mauve: 0 8px 22px rgba(154, 106, 142, 0.30);
  --shadow-blue:  0 8px 22px rgba(79, 109, 154, 0.28);

  /* inset — for sunken fields & pressed states */
  --shadow-inset: inset 0 1px 2px rgba(58, 36, 51, 0.08);

  /* ---- borders ------------------------------------------ */
  --border-width: 1px;
  --border-hairline: 1px solid var(--border);
  --border-soft-line: 1px solid var(--border-soft);
  --border-focus: 2px solid var(--focus-ring);

  /* ---- focus ring (a11y) -------------------------------- */
  --ring: 0 0 0 3px rgba(154, 106, 142, 0.30);
  --ring-blue: 0 0 0 3px rgba(79, 109, 154, 0.28);

  /* ---- blur / glass ------------------------------------- */
  --blur-sm: blur(6px);                /* @kind other */
  --blur-md: blur(14px);               /* @kind other */
  --glass: saturate(1.3) blur(14px);   /* @kind other */

  /* ---- motion ------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* @kind other */ /* gentle overshoot */

  --dur-fast:   120ms;   /* @kind other */
  --dur-base:   220ms;   /* @kind other */
  --dur-slow:   360ms;   /* @kind other */

  --transition-base: all var(--dur-base) var(--ease-out);
  --transition-color: color var(--dur-fast) var(--ease-out),
                      background-color var(--dur-fast) var(--ease-out),
                      border-color var(--dur-fast) var(--ease-out);
}
/* =========================================================
   Base / reset — Aaron & Tara Dating
   ---------------------------------------------------------
   A light, opinionated baseline so specimen cards, kits and
   prototypes share the same warm starting point. Consuming
   apps may override freely.
   ========================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: 0 0 var(--space-3);
}

h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-4); }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: var(--transition-color);
}
a:hover { color: var(--primary-press); }

small { font-size: var(--text-sm); }

strong { font-weight: var(--fw-bold); }

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

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

img { max-width: 100%; display: block; }

button { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}
/* =========================================================
   Component styles — Aaron & Tara Dating
   ---------------------------------------------------------
   Shipped with the design system. React components apply
   these classes; dynamic bits use inline styles. Prefix: atd-
   ========================================================= */

/* ---------- Button ------------------------------------- */
.atd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  line-height: 1;
  letter-spacing: .01em;
  height: var(--control-md);
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  background: var(--primary);
  color: var(--on-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-spring),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.atd-btn:active { transform: scale(0.96); }
.atd-btn:focus-visible { outline: none; box-shadow: var(--ring); }

.atd-btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-mauve); }
.atd-btn--primary:hover { background: var(--primary-hover); box-shadow: 0 10px 26px rgba(154,106,142,.36); }

.atd-btn--secondary { background: var(--secondary); color: var(--on-secondary); box-shadow: var(--shadow-blue); }
.atd-btn--secondary:hover { background: var(--secondary-hover); }

.atd-btn--soft { background: var(--primary-soft); color: var(--primary-press); }
.atd-btn--soft:hover { background: var(--mauve-200); }

.atd-btn--outline { background: transparent; color: var(--primary-press); border-color: var(--mauve-300); }
.atd-btn--outline:hover { background: var(--mauve-50); border-color: var(--mauve-400); }

.atd-btn--ghost { background: transparent; color: var(--text); }
.atd-btn--ghost:hover { background: var(--surface-sunken); }

.atd-btn--sm { height: var(--control-sm); padding: 0 var(--space-4); font-size: var(--text-xs); }
.atd-btn--lg { height: var(--control-lg); padding: 0 var(--space-7); font-size: var(--text-base); }
.atd-btn--block { display: flex; width: 100%; }

.atd-btn:disabled,
.atd-btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; box-shadow: none; transform: none;
}

/* ---------- IconButton --------------------------------- */
.atd-iconbtn {
  display: inline-grid;
  place-items: center;
  width: var(--control-md);
  height: var(--control-md);
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: var(--transition-color), transform var(--dur-fast) var(--ease-spring);
}
.atd-iconbtn:hover { background: var(--surface-sunken); }
.atd-iconbtn:active { transform: scale(0.92); }
.atd-iconbtn:focus-visible { outline: none; box-shadow: var(--ring); }
.atd-iconbtn--solid { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-mauve); }
.atd-iconbtn--solid:hover { background: var(--primary-hover); }
.atd-iconbtn--soft { background: var(--primary-soft); color: var(--primary-press); }
.atd-iconbtn--soft:hover { background: var(--mauve-200); }
.atd-iconbtn--outline { border-color: var(--border); }
.atd-iconbtn--outline:hover { border-color: var(--mauve-300); background: var(--mauve-50); }
.atd-iconbtn--sm { width: var(--control-sm); height: var(--control-sm); }
.atd-iconbtn--lg { width: var(--control-lg); height: var(--control-lg); }
.atd-iconbtn svg { width: var(--icon-md); height: var(--icon-md); }

/* ---------- Card --------------------------------------- */
.atd-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.atd-card--raised { background: var(--surface-raised); box-shadow: var(--shadow-md); border-color: transparent; }
.atd-card--flat { box-shadow: none; }
.atd-card--pad { padding: var(--pad-card); }
.atd-card--interactive { cursor: pointer; transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out); }
.atd-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.atd-card--interactive:active { transform: translateY(-1px); }
.atd-card--mauve { background: var(--surface-mauve); border-color: var(--mauve-100); }
.atd-card--blue { background: var(--surface-blue); border-color: var(--blue-100); }
.atd-card--brown { background: var(--surface-brown); border-color: var(--brown-100); }

/* ---------- Badge -------------------------------------- */
.atd-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xs);
  letter-spacing: .03em;
  line-height: 1;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-muted);
  text-transform: uppercase;
}
.atd-badge--primary  { background: var(--mauve-100);  color: var(--mauve-700); }
.atd-badge--secondary{ background: var(--blue-100);   color: var(--blue-700); }
.atd-badge--accent   { background: var(--brown-100);  color: var(--brown-700); }
.atd-badge--success  { background: var(--success-soft);color: var(--green-700); }
.atd-badge--warning  { background: var(--warning-soft);color: var(--amber-700); }
.atd-badge--danger   { background: var(--danger-soft); color: var(--rose-700); }
.atd-badge--solid    { background: var(--primary); color: var(--on-primary); }
.atd-badge .atd-badge__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* ---------- Tag / Chip --------------------------------- */
.atd-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  line-height: 1;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border);
  cursor: default;
  transition: var(--transition-color);
}
.atd-tag--selectable { cursor: pointer; }
.atd-tag--selectable:hover { border-color: var(--mauve-300); background: var(--mauve-50); }
.atd-tag--selected { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.atd-tag__remove { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 999px; cursor: pointer; opacity: .65; }
.atd-tag__remove:hover { opacity: 1; background: rgba(0,0,0,.08); }

/* ---------- Avatar ------------------------------------- */
.atd-avatar {
  display: inline-grid;
  place-items: center;
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: 999px;
  background: var(--mauve-200);
  color: var(--mauve-800);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  overflow: hidden;
  flex: none;
  user-select: none;
  border: 2px solid var(--surface-raised);
}
.atd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.atd-avatar--sm { width: var(--avatar-sm); height: var(--avatar-sm); font-size: var(--text-2xs); }
.atd-avatar--lg { width: var(--avatar-lg); height: var(--avatar-lg); font-size: var(--text-lg); }
.atd-avatar--xl { width: var(--avatar-xl); height: var(--avatar-xl); font-size: var(--text-2xl); }
.atd-avatar--tara  { background: var(--mauve-200); color: var(--mauve-800); }
.atd-avatar--aaron { background: var(--blue-200);  color: var(--blue-800); }
.atd-avatar-stack { display: inline-flex; }
.atd-avatar-stack > .atd-avatar + .atd-avatar { margin-left: -12px; }

/* ---------- Input / Textarea --------------------------- */
.atd-field { display: flex; flex-direction: column; gap: var(--space-2); }
.atd-field__label { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--text); }
.atd-field__hint { font-size: var(--text-xs); color: var(--text-muted); }
.atd-field__error { font-size: var(--text-xs); color: var(--danger); font-weight: var(--fw-semibold); }

.atd-input {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  height: var(--control-md);
  padding: 0 var(--space-4);
  width: 100%;
  transition: var(--transition-color), box-shadow var(--dur-fast) var(--ease-out);
}
textarea.atd-input { height: auto; min-height: 96px; padding: var(--space-3) var(--space-4); line-height: var(--leading-normal); resize: vertical; }
.atd-input::placeholder { color: var(--text-subtle); }
.atd-input:hover { border-color: var(--mauve-300); }
.atd-input:focus { outline: none; border-color: var(--mauve-400); box-shadow: var(--ring); }
.atd-input--error { border-color: var(--danger); }
.atd-input--error:focus { box-shadow: 0 0 0 3px var(--danger-soft); }
.atd-input:disabled { background: var(--surface-sunken); color: var(--text-subtle); cursor: not-allowed; }

.atd-input-wrap { position: relative; display: flex; align-items: center; }
.atd-input-wrap .atd-input__icon { position: absolute; left: var(--space-4); color: var(--text-subtle); display: grid; place-items: center; pointer-events: none; }
.atd-input-wrap .atd-input__icon svg { width: var(--icon-md); height: var(--icon-md); }
.atd-input-wrap--icon .atd-input { padding-left: calc(var(--space-4) * 2 + var(--icon-md)); }

/* ---------- Select ------------------------------------- */
.atd-select-wrap { position: relative; display: flex; align-items: center; }
.atd-select {
  appearance: none;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  height: var(--control-md);
  padding: 0 calc(var(--space-7)) 0 var(--space-4);
  width: 100%;
  cursor: pointer;
  transition: var(--transition-color), box-shadow var(--dur-fast) var(--ease-out);
}
.atd-select:hover { border-color: var(--mauve-300); }
.atd-select:focus { outline: none; border-color: var(--mauve-400); box-shadow: var(--ring); }
.atd-select-wrap__chev { position: absolute; right: var(--space-4); pointer-events: none; color: var(--text-muted); display: grid; place-items: center; }
.atd-select-wrap__chev svg { width: var(--icon-md); height: var(--icon-md); }

/* ---------- Checkbox ----------------------------------- */
.atd-check { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: var(--text-sm); color: var(--text); user-select: none; }
.atd-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.atd-check__box {
  width: 22px; height: 22px; border-radius: 7px;
  border: 1.5px solid var(--border); background: var(--surface-raised);
  display: grid; place-items: center; flex: none;
  transition: var(--transition-color), transform var(--dur-fast) var(--ease-spring);
  color: #fff;
}
.atd-check__box svg { width: 14px; height: 14px; opacity: 0; transform: scale(.6); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring); }
.atd-check input:checked + .atd-check__box { background: var(--primary); border-color: var(--primary); }
.atd-check input:checked + .atd-check__box svg { opacity: 1; transform: scale(1); }
.atd-check input:focus-visible + .atd-check__box { box-shadow: var(--ring); }
.atd-check:active .atd-check__box { transform: scale(.9); }

/* ---------- Switch ------------------------------------- */
.atd-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; user-select: none; font-size: var(--text-sm); color: var(--text); }
.atd-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.atd-switch__track {
  width: 46px; height: 28px; border-radius: 999px;
  background: var(--paper-dim); border: 1.5px solid var(--border);
  position: relative; flex: none;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.atd-switch__thumb {
  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
  border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-spring);
}
.atd-switch input:checked + .atd-switch__track { background: var(--primary); border-color: var(--primary); }
.atd-switch input:checked + .atd-switch__track .atd-switch__thumb { transform: translateX(18px); }
.atd-switch input:focus-visible + .atd-switch__track { box-shadow: var(--ring); }

/* ---------- HeartRating -------------------------------- */
.atd-hearts { display: inline-flex; align-items: center; gap: 3px; }
.atd-hearts__btn { background: none; border: 0; padding: 2px; cursor: pointer; line-height: 0; color: var(--mauve-200); transition: transform var(--dur-fast) var(--ease-spring), color var(--dur-fast) var(--ease-out); }
.atd-hearts__btn svg { width: 22px; height: 22px; }
.atd-hearts--readonly .atd-hearts__btn { cursor: default; }
.atd-hearts__btn.is-on { color: var(--mauve-500); }
.atd-hearts__btn:not(.is-readonly):hover { transform: scale(1.2); }
.atd-hearts--sm .atd-hearts__btn svg { width: 16px; height: 16px; }
.atd-hearts--lg .atd-hearts__btn svg { width: 30px; height: 30px; }

/* ---------- Tabs --------------------------------------- */
.atd-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-sunken); border-radius: var(--radius-pill); }
.atd-tabs__tab {
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--text-sm);
  color: var(--text-muted); background: transparent; border: 0;
  padding: 8px 16px; border-radius: var(--radius-pill); cursor: pointer;
  transition: var(--transition-color);
}
.atd-tabs__tab:hover { color: var(--text); }
.atd-tabs__tab.is-active { background: var(--surface-raised); color: var(--primary-press); box-shadow: var(--shadow-sm); }
.atd-tabs--full { display: flex; }
.atd-tabs--full .atd-tabs__tab { flex: 1; text-align: center; }