/* 7Sense — Quiet Design System
   Aesthetic: paper, ink, and one signal color per ambient state.
   The brand is the calm. Ambient state is shown via halo intensity. */

:root {
  /* Paper & ink — warm, low-saturation neutrals */
  --paper-0: #F8F5F0;       /* warm paper, app bg */
  --paper-1: #FFFFFF;       /* card */
  --paper-2: #F1ECE3;       /* sunken */
  --paper-3: #E8E2D6;       /* divider */
  --ink-0: #181612;         /* near-black, text */
  --ink-1: #3B342A;         /* body */
  --ink-2: #6E665A;         /* muted */
  --ink-3: #9E978B;         /* placeholder */
  --hairline: rgba(24,22,18,0.08);

  /* Brand — a refined lavender lifted from the existing logo */
  --brand: #6B5BD4;
  --brand-soft: #ECE8FB;
  --brand-ink: #3F348F;

  /* Ambient — the sensory verdict palette.
     Calm = green, Soft = sand, Lively = amber, Intense = clay.
     Saturated low so they read as ambient, not alert. */
  --calm: #4A8A6F;          /* green */
  --calm-bg: #E4EFE9;
  --soft: #C5A56A;          /* honey */
  --soft-bg: #F2EADA;
  --lively: #D38447;        /* amber */
  --lively-bg: #F6E5D4;
  --intense: #B14A3E;       /* clay */
  --intense-bg: #F1DBD6;

  /* Sense glyph track colors used in radial readouts */
  --sense-sound: #6B5BD4;
  --sense-light: #D9A24A;
  --sense-crowd: #5285B8;
  --sense-smell: #7A8A4D;
  --sense-temp:  #C76A55;
  --sense-motion:#8A6FA7;
  --sense-air:   #4A8A6F;

  /* Type */
  --font-sans: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Radii — softly rounded but not bubblegum */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Elevation — almost flat */
  --shadow-1: 0 1px 0 rgba(24,22,18,0.04), 0 4px 14px rgba(24,22,18,0.04);
  --shadow-2: 0 1px 0 rgba(24,22,18,0.05), 0 8px 28px rgba(24,22,18,0.06);
}

/* Dark mode tokens — same hierarchy, deep ink paper */
.dark {
  --paper-0: #15130F;
  --paper-1: #1E1B17;
  --paper-2: #28241F;
  --paper-3: #34302A;
  --ink-0: #F4EFE6;
  --ink-1: #DDD5C8;
  --ink-2: #9A9181;
  --ink-3: #6E665A;
  --hairline: rgba(244,239,230,0.08);

  --brand: #9F92E8;
  --brand-soft: #2E2858;
  --brand-ink: #CFC6F4;

  --calm: #6FB390;
  --calm-bg: #1E2E26;
  --soft: #D4B47C;
  --soft-bg: #2E281C;
  --lively: #E29A60;
  --lively-bg: #34261A;
  --intense: #D5685A;
  --intense-bg: #341E1B;

  --shadow-1: 0 1px 0 rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.35);
  --shadow-2: 0 1px 0 rgba(0,0,0,0.5), 0 8px 28px rgba(0,0,0,0.45);
}

/* Type defaults inside any 7Sense surface */
.s7 {
  font-family: var(--font-sans);
  color: var(--ink-0);
  background: var(--paper-0);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  line-height: 1.4;
}
.s7 * { box-sizing: border-box; }
.s7 .display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; }
.s7 .mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.s7 .num { font-feature-settings: "tnum", "ss01"; font-variant-numeric: tabular-nums; }

/* Hairline divider */
.s7 .hr { height: 1px; background: var(--hairline); border: 0; }

/* Common ambient pill */
.amb {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  padding: 4px 9px; border-radius: var(--r-pill);
  text-transform: uppercase;
}
.amb-dot { width: 6px; height: 6px; border-radius: 50%; }
.amb.calm    { color: var(--calm);    background: var(--calm-bg); }
.amb.calm    .amb-dot { background: var(--calm); }
.amb.soft    { color: #8A6F2E;        background: var(--soft-bg); }
.amb.soft    .amb-dot { background: var(--soft); }
.amb.lively  { color: #A65A28;        background: var(--lively-bg); }
.amb.lively  .amb-dot { background: var(--lively); }
.amb.intense { color: #8A2F22;        background: var(--intense-bg); }
.amb.intense .amb-dot { background: var(--intense); }
.dark .amb.soft   { color: var(--soft); }
.dark .amb.lively { color: var(--lively); }
.dark .amb.intense{ color: var(--intense); }

/* Field */
.s7 .field {
  width: 100%;
  background: var(--paper-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font: 500 15px/1.2 var(--font-sans);
  color: var(--ink-0);
}
.s7 .field::placeholder { color: var(--ink-3); font-weight: 400; }
.s7 .field:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.s7 .field-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }

/* Buttons */
.s7 .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 52px; border-radius: var(--r-md);
  font: 600 15px/1 var(--font-sans); letter-spacing: 0.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
.s7 .btn:active { transform: scale(0.985); }
.s7 .btn-primary  { background: var(--ink-0); color: var(--paper-0); }
.s7 .btn-secondary{ background: var(--paper-1); color: var(--ink-0); border-color: var(--hairline); }
.s7 .btn-ghost    { background: transparent; color: var(--ink-1); }
.s7 .btn-brand    { background: var(--brand); color: white; }
.dark .btn-primary{ background: var(--ink-0); color: var(--paper-0); }

/* Tab bar */
.s7 .tabbar {
  display: flex; justify-content: space-around; align-items: center;
  padding: 8px 12px 12px;
  background: rgba(248,245,240,0.85);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--hairline);
}
.dark .tabbar { background: rgba(21,19,15,0.85); }
.s7 .tabbar .tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 500; color: var(--ink-3);
  padding: 6px 10px; border-radius: 10px;
}
.s7 .tabbar .tab.on { color: var(--ink-0); }

/* Card */
.s7 .card {
  background: var(--paper-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}

/* Ring readout — radial dial used for sensor scans + place sensory profile */
.s7 .ring-bg { stroke: var(--paper-3); }
.dark .ring-bg { stroke: var(--paper-3); }