/* ============================================================
   WEAR RAME SOCIETY — DESIGN TOKENS + BASE  (Modern health-app · FLO-style)
   Light & warm, geometric sans (Plus Jakarta Sans), circular rings, rounded
   gradient cards, soft shadows, app-native dashboard feel.
   Tokens marked  / * ADMIN * /  are overridable from the Brand tab.
   ============================================================ */
:root {
  /* ---------- COLOR · BASE / SURFACES ---------- */
  /* PALETTE: Vanilla Cream · Blush Petal · Rosewood · Sage Leaf · Misty Sky · Midnight Lagoon */
  --c-bg:            #FFF7E6;            /* ADMIN — Vanilla Cream canvas */
  --c-bg-tint:       #FFFFFF;
  --c-surface:       #FFFFFF;
  --c-surface-2:     #FBF3E0;            /* cream input fill / nested */
  --c-surface-3:     #F1E7D1;
  --c-overlay-scrim: rgba(45, 58, 71, 0.45);   /* Midnight Lagoon */
  --c-blur-veil:     rgba(255, 247, 230, 0.66);

  /* ---------- COLOR · INK / TEXT (Midnight Lagoon) ---------- */
  --c-ink:           #2D3A47;            /* ADMIN — Midnight Lagoon */
  --c-ink-soft:      #56616E;
  --c-ink-muted:     #67707C;            /* darkened for WCAG AA (~4.7:1 on cream) */
  --c-ink-faint:     #BBC2CB;
  --c-on-accent:     #FFFFFF;
  --c-on-gold:       #3A2C12;

  /* ---------- COLOR · ACCENT (Rosewood primary, Blush Petal soft) ---------- */
  --c-blush:         #B46A72;            /* ADMIN — Rosewood (primary accent) */
  --c-blush-soft:    #F7C8D3;            /* Blush Petal */
  --c-blush-wash:    #FBE8EC;
  --c-blush-ink:     #99535B;            /* deep Rosewood for text (AA) */
  --c-rose:          #C98A93;            /* lighter rose partner */
  --c-rose-wash:     #FBE8EC;
  --c-lav:           #A9B7C6;            /* Misty Sky (cool partner) */
  --c-lav-wash:      #E8EDF2;
  --c-peach:         #F7C8D3;

  --c-gold:          #C2A06A;            /* ADMIN — warm camel (cream-derived) for points/Founding */
  --c-gold-bright:   #DCC18B;
  --c-gold-deep:     #876A38;
  --c-gold-wash:     #F5ECD8;
  --c-gold-grad:     linear-gradient(135deg, var(--c-gold-bright) 0%, var(--c-gold) 55%, var(--c-gold-deep) 100%);

  /* ---------- GRADIENTS (palette blends) ---------- */
  --grad-ring:    linear-gradient(135deg, #F7C8D3 0%, #B46A72 55%, #A9B7C6 100%);   /* blush→rosewood→misty */
  --grad-accent:  linear-gradient(135deg, #F7C8D3 0%, #B46A72 55%, #99535B 100%);
  --grad-btn:     linear-gradient(135deg, #B46A72 0%, #99535B 100%);   /* Rosewood→deep rose (white AA) */
  --grad-warm:    linear-gradient(160deg, #FFF7E6 0%, #F7C8D3 100%);   /* cream→blush */
  --grad-cool:    linear-gradient(160deg, #E8EDF2 0%, #FBE8EC 100%);   /* misty→blush */
  --grad-hero:    linear-gradient(170deg, #FFF7E6 0%, #FBE8EC 55%, #E8EDF2 100%); /* cream→blush→misty */

  /* ---------- COLOR · CATEGORY / VENUE PINS ---------- */
  --c-sage:          #A8B58A;  --c-sage-wash: #EDF0E2;  --c-sage-deep:  #6B7A4E;   /* Sage Leaf */
  --c-teal:          #A9B7C6;  --c-teal-wash: #E8EDF2;  --c-teal-deep:  #4F5E6E;   /* Misty Sky */
  --c-amber:         #C2A06A;  --c-amber-wash:#F5ECD8;  --c-amber-deep: #836A39;   /* camel */
  --c-pin-spa:       var(--c-blush);
  --c-pin-recovery:  #A9B7C6;

  /* ---------- COLOR · TIER BADGES ---------- */
  --c-tier-sand:     #D8C9A8;
  --c-tier-blush:    var(--c-blush);
  --c-tier-gold:     var(--c-gold);
  --c-verified:      #6E8092;

  /* ---------- COLOR · STATUS ---------- */
  --c-success: #5C7A46;  --c-success-wash:#EDF0E2;   /* sage */
  --c-warn:    #B08A4E;  --c-warn-wash:   #F5ECD8;
  --c-danger:  #B5605F;  --c-danger-wash: #F7E4E2;
  --c-info:    var(--c-lav); --c-info-wash: var(--c-lav-wash);
  --c-streak:  #C98A93;

  /* ---------- COLOR · LINES ---------- */
  --c-line:        #EFE6D0;
  --c-line-soft:   #F5EEDC;
  --c-line-strong: #E2D6BE;

  /* ---------- TYPOGRAPHY (geometric sans + retro script wordmark) ---------- */
  --font-head: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* ADMIN */
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* ADMIN */
  --font-script: 'Pacifico', 'Brush Script MT', cursive; /* brand wordmark + section titles */
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --font-scale: 1;                       /* ADMIN */
  --fs-2xs:  calc(0.6875rem * var(--font-scale));
  --fs-xs:   calc(0.75rem   * var(--font-scale));
  --fs-sm:   calc(0.8125rem * var(--font-scale));
  --fs-base: calc(0.9375rem * var(--font-scale));
  --fs-md:   calc(1.0625rem * var(--font-scale));
  --fs-lg:   calc(1.3125rem * var(--font-scale));
  --fs-xl:   calc(1.625rem  * var(--font-scale));
  --fs-2xl:  calc(2.125rem  * var(--font-scale));
  --fs-3xl:  calc(2.75rem   * var(--font-scale));
  --fs-num:  calc(3.5rem    * var(--font-scale));   /* big ring number */

  --lh-tight: 1.05; --lh-snug: 1.22; --lh-base: 1.5; --lh-normal: 1.55; --lh-loose: 1.7;
  --ls-tight: -0.03em; --ls-snug: -0.015em; --ls-normal: 0; --ls-wide: 0.06em; --ls-caps: 0.14em;
  --weight-light: 400; --weight-reg: 400; --weight-med: 500; --weight-semi: 600; --weight-bold: 700; --weight-x: 800;

  /* ---------- SPACING ---------- */
  --sp-0:0; --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem;
  --gutter: 1.25rem;                     /* ADMIN */
  --card-pad: 1.25rem;                   /* ADMIN */
  --section-gap: 1.75rem;
  --content-max: 460px;

  /* ---------- RADIUS (soft, rounded, app-native) ---------- */
  --r-xs:8px; --r-sm:12px; --r-md:16px; /* ADMIN */ --r-lg:22px; --r-xl:28px; --r-2xl:34px;
  --r-pill:999px; --r-circle:50%;

  /* ---------- SHADOWS (soft, slightly warm) ---------- */
  --sh-xs: 0 1px 3px rgba(60,40,55,.04);
  --sh-sm: 0 4px 14px rgba(60,40,55,.06);
  --sh-md: 0 12px 30px rgba(60,40,55,.08);
  --sh-lg: 0 20px 50px rgba(60,40,55,.12);
  --sh-xl: 0 30px 70px rgba(60,40,55,.16);
  --sh-accent: 0 12px 30px rgba(153,83,91,.24);
  --sh-gold: 0 10px 26px rgba(135,106,56,.22);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.5);
  --sh-focus: 0 0 0 3px rgba(180,106,114,.30);

  /* ---------- Z-INDEX ---------- */
  --z-sticky:10; --z-nav:60; --z-fab:70; --z-overlay:100; --z-sheet:200; --z-modal:300; --z-toast:400; --z-max:999;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-soft: cubic-bezier(.34,1.32,.64,1);
  --t-fast:140ms; --t-base:240ms; --t-slow:480ms; --t-screen:520ms;

  /* ---------- LAYOUT ---------- */
  --tabbar-h:74px; --topbar-h:58px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tap-min:44px;
}

/* ---------------- BASE ---------------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html { touch-action: manipulation; } /* removes the 300ms double-tap zoom delay */
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-ink);
  background: var(--c-bg);
  font-weight: var(--weight-med);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { font-family: var(--font-head); font-weight: var(--weight-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--c-ink); margin: 0; }
h1 { font-size: var(--fs-xl); } h2 { font-size: var(--fs-lg); } h3 { font-size: var(--fs-md); font-weight: var(--weight-bold); }
p { margin: 0 0 var(--sp-3); }
a { color: var(--c-blush-ink); text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
/* 16px minimum on form controls so iOS Safari never auto-zooms (and shifts) the page on focus. */
input, textarea, select { font-family: inherit; font-size: max(16px, var(--fs-base)); color: var(--c-ink); }
/* Global icon base — line icons by default; component rules override size/fill as needed.
   (Without this, an icon in a context with no .ico rule renders huge & black-filled.) */
.ico { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none;
  flex: 0 0 auto; display: inline-block; vertical-align: middle; }

.display { font-family: var(--font-head); font-size: var(--fs-2xl); line-height: var(--lh-tight); font-weight: var(--weight-x); letter-spacing: var(--ls-tight); }
.eyebrow { font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-ink-muted); font-weight: var(--weight-bold); }
/* the daily reflection prompt — modern, friendly (no serif/italic) */
.prompt, .quote { font-family: var(--font-head); font-style: normal; font-weight: var(--weight-semi); font-size: var(--fs-lg); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--c-ink); }
.muted { color: var(--c-ink-muted); }
.mono { font-family: var(--font-mono); }
.center { text-align: center; }
.hidden { display: none !important; }
.stack > * + * { margin-top: var(--sp-3); }
.row { display: flex; align-items: center; gap: var(--sp-2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.spacer { flex: 1 1 auto; }
.grad-text { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }

.app { max-width: var(--content-max); margin: 0 auto; min-height: 100dvh; position: relative; background: var(--c-bg); overflow-x: hidden; }
.screen { padding: var(--gutter); padding-top: calc(var(--topbar-h) + var(--safe-top) + var(--sp-3)); padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-8)); animation: screen-in var(--t-screen) var(--ease-out); }
.screen--bleed { padding-top: 0; }
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.section { margin-bottom: var(--section-gap); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-3); }
.section__head h2 { font-size: var(--fs-md); font-weight: var(--weight-bold); }
.section__head a, .section__head button { font-size: var(--fs-sm); color: var(--c-blush-ink); font-weight: var(--weight-semi); background: none; border: 0; cursor: pointer; }

:focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: var(--r-sm); }
.bleed { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }

/* inputs — rounded, soft */
.field { width: 100%; height: 52px; padding: 0 var(--sp-4); border-radius: var(--r-md); border: 1.5px solid var(--c-line-strong); background: var(--c-surface); color: var(--c-ink); font-weight: var(--weight-med); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.field:focus { outline: none; border-color: var(--c-blush); box-shadow: var(--sh-focus); }
.field::placeholder { color: var(--c-ink-faint); }
textarea.field { height: auto; min-height: 108px; padding: var(--sp-3) var(--sp-4); resize: vertical; line-height: var(--lh-normal); }
.label { display: block; font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-ink-muted); margin-bottom: var(--sp-2); font-weight: var(--weight-bold); }

.skeleton { background: linear-gradient(100deg, var(--c-surface-3) 30%, var(--c-surface-2) 50%, var(--c-surface-3) 70%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-lg); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.boot-spinner { position: fixed; inset: 0; display: grid; place-items: center; background: var(--c-bg); z-index: var(--z-max); }
.boot-spinner .ring { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--c-blush-soft); border-top-color: var(--c-blush); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.empty { text-align: center; padding: var(--sp-12) var(--sp-5); color: var(--c-ink-muted); }
.empty::before { content: ''; display: block; width: 64px; height: 64px; margin: 0 auto var(--sp-4); border-radius: 50%; background: linear-gradient(135deg, var(--c-blush-soft), var(--c-blush-wash)); box-shadow: var(--sh-xs); }
.empty h3 { font-weight: var(--weight-bold); font-size: var(--fs-lg); color: var(--c-ink-soft); margin-bottom: var(--sp-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}