/* TabiTots — locked design tokens */
:root {
  /* page + surface */
  --tt-page: #FAF6F1;
  --tt-surface: #FFFFFF;
  --tt-sunken: #F3EFE9;

  /* parent indigo */
  --tt-indigo: #3D5A80;
  --tt-indigo-press: #2F476A;
  --tt-indigo-hover: #5A75A0;
  --tt-indigo-tint: #E8EDF5;
  --tt-indigo-vlight: #F3F6FA;

  /* provider ochre */
  --tt-ochre: #D4A574;
  --tt-ochre-press: #B6884F;
  --tt-ochre-hover: #E0BC95;
  --tt-ochre-tint: #F7EEDF;
  --tt-ochre-vlight: #FBF6EC;

  /* ink */
  --tt-ink: #1F2A3A;
  --tt-ink-strong: #3F4D62;
  --tt-ink-secondary: #5A6A7E;
  --tt-ink-meta: #8A95A4;

  --tt-hairline: rgba(31, 42, 58, 0.08);

  /* sand neutrals — warm-bg accents in the page-bg family.
     Used for hero gradients only. NEVER as text or role surfaces. */
  --tt-sand: #C7B8A3;
  --tt-sand-deep: #A89378;
  --tt-sand-soft: #D7CBB8;
  --tt-moss: #B7C4A8;
  --tt-moss-deep: #92A37F;
  --tt-clay: #C9A88F;
  --tt-clay-deep: #A88567;
  --tt-stone: #B8B8AE;
  --tt-stone-deep: #93938A;
  --tt-dusk: #A0A8B5;
  --tt-dusk-deep: #7C8694;

  /* hero gradients — provider profile + concierge + JA heroes pull from these.
     Tokenized so providers reference --tt-hero-N, never raw hex. */
  --tt-hero-1: linear-gradient(135deg, #C7B8A3, #A89378); /* sand · default */
  --tt-hero-2: linear-gradient(135deg, #B7C4A8, #92A37F); /* moss */
  --tt-hero-3: linear-gradient(135deg, #C9A88F, #A88567); /* clay */
  --tt-hero-4: linear-gradient(135deg, #B5BFA9, #8A9C82); /* stone-moss */
  --tt-hero-5: linear-gradient(135deg, #A0A8B5, #7C8694); /* dusk */
  --tt-hero-6: linear-gradient(135deg, #D7CBB8, #B5A689); /* sand-soft */
  --tt-hero-concierge: linear-gradient(135deg, #C7B8A3, #A89378);

  /* semantic */
  --tt-success: #3F7D58;
  --tt-success-100: #DCEBE2;
  --tt-warning: #B8862B;
  --tt-warning-100: #F4E7CB;
  --tt-danger: #B5483D;
  --tt-danger-100: #F4DAD6;

  /* radius */
  --tt-r-pill-l: 28px;
  --tt-r-pill-s: 22px;
  --tt-r-card: 16px;
  --tt-r-input: 12px;
  --tt-r-chip: 999px;

  /* shadow */
  --tt-shadow-card: 0 1px 2px rgba(31,42,58,0.04), 0 4px 12px rgba(31,42,58,0.04);
  --tt-shadow-sheet: 0 -2px 24px rgba(31,42,58,0.08);
}

.tt-root {
  font-family: 'Inter', 'Noto Sans JP', system-ui, sans-serif;
  font-feature-settings: 'cv05', 'cv11', 'ss01';
  background: var(--tt-page);
  color: var(--tt-ink);
  height: 100%;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.tt-display { font-family: 'Plus Jakarta Sans', 'Noto Sans JP', system-ui, sans-serif; letter-spacing: -0.01em; }
.tt-ja { font-family: 'Noto Sans JP', 'Inter', system-ui, sans-serif; }

/* type tiers */
.tt-t-display { font-family: 'Plus Jakarta Sans', 'Noto Sans JP', system-ui, sans-serif; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.012em; }
.tt-t-title-l { font-family: 'Plus Jakarta Sans', 'Noto Sans JP', system-ui, sans-serif; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.008em; }
.tt-t-title-m { font-family: 'Plus Jakarta Sans', 'Noto Sans JP', system-ui, sans-serif; font-size: 18px; line-height: 24px; font-weight: 600; }
.tt-t-body-l  { font-size: 16px; line-height: 24px; font-weight: 500; }
.tt-t-body-m  { font-size: 15px; line-height: 22px; font-weight: 450; }
.tt-t-body-s  { font-size: 13px; line-height: 18px; font-weight: 450; }
.tt-t-label-s { font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.01em; }

/* widget primitives */
.tt-pill-l { height: 56px; border-radius: var(--tt-r-pill-l); padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 600; border: none; cursor: pointer; font-family: inherit; }
.tt-pill-s { height: 44px; border-radius: var(--tt-r-pill-s); padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 500; border: none; cursor: pointer; font-family: inherit; }
.tt-btn-primary { background: var(--tt-indigo); color: #fff; }
.tt-btn-secondary { background: var(--tt-indigo-tint); color: var(--tt-indigo); }
.tt-btn-ghost { background: transparent; color: var(--tt-indigo); }
.tt-btn-danger { background: var(--tt-danger); color: #fff; }
/* primary-on-hero — for buttons sitting on a sand/moss/clay hero gradient.
   White surface, ink-strong text + 1.5px ink-strong border for AA contrast. */
.tt-btn-on-hero { background: #FFFFFF; color: var(--tt-ink); box-shadow: inset 0 0 0 1.5px var(--tt-ink-strong); }
.tt-btn-on-hero:hover { background: #F8F4EE; }
.tt-btn-on-hero:active { background: #EFE9DF; }

.tt-input { height: 48px; border-radius: var(--tt-r-input); border: 1px solid var(--tt-hairline); background: var(--tt-surface); padding: 0 14px; font-size: 16px; color: var(--tt-ink); width: 100%; box-sizing: border-box; font-family: inherit; }
.tt-input::placeholder { color: var(--tt-ink-meta); }
.tt-input:focus { outline: none; border-color: var(--tt-indigo); box-shadow: 0 0 0 3px var(--tt-indigo-tint); }

.tt-card { background: var(--tt-surface); border-radius: var(--tt-r-card); border: 0.5px solid var(--tt-hairline); box-shadow: var(--tt-shadow-card); }
.tt-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: var(--tt-r-chip); font-size: 12px; font-weight: 500; }
.tt-chip-verified { background: var(--tt-indigo-tint); color: var(--tt-indigo); }
.tt-chip-provider { background: var(--tt-ochre-tint); color: var(--tt-ochre-press); }
.tt-chip-success { background: var(--tt-success-100); color: var(--tt-success); }
.tt-chip-warning { background: var(--tt-warning-100); color: var(--tt-warning); }
.tt-chip-meta    { background: var(--tt-sunken); color: var(--tt-ink-secondary); }

.tt-divider { height: 0.5px; background: var(--tt-hairline); }

.tt-photo { background: var(--tt-sunken); position: relative; overflow: hidden; }
.tt-photo::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(31,42,58,0.04) 0 2px, transparent 2px 14px);
}
.tt-photo-cap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; line-height: 14px; color: var(--tt-ink-secondary); text-align: center; }

/* iOS frame chrome reset for our designs */
.tt-screen { width: 100%; height: 100%; background: var(--tt-page); color: var(--tt-ink); display: flex; flex-direction: column; overflow: hidden; }

/* minimal scrollbar hide */
.tt-screen *::-webkit-scrollbar { display: none; }
.tt-screen * { scrollbar-width: none; }

/* status bar bg awareness */
.tt-statusbar { height: 54px; flex-shrink: 0; background: transparent; }
.tt-tabbar { height: 84px; flex-shrink: 0; padding: 8px 0 24px; background: var(--tt-surface); border-top: 0.5px solid var(--tt-hairline); display: flex; }