/* ============================================================
   DUVERA DESIGN SYSTEM — Foundations
   "The Digital Sanctuary"
   Warm neutrals, humanist editorial, soft-touch layering.
   ============================================================ */

/* Duvera uses two typefaces:
   — DM Sans (brand wordmark, display, headlines) — humanist geometric
   — Manrope (body, UI, labels) — quiet humanist for long-form reading
   Both loaded from Google Fonts. If self-hosting, see fonts/ */

/* Material Symbols Outlined — the icon set used throughout
   the app. Variable font; weight 200–400 typical. */

:root {
  /* ----------------------------------------------------------
     COLOR — Surfaces (layered "fine paper" tiers)
     Never use pure #FFFFFF or #000000.
     Structural separation comes from tier shifts, not borders.
     ---------------------------------------------------------- */
  --surface:                   #fffbff;  /* base canvas, warm off-white */
  --surface-bright:            #fffbff;
  --surface-dim:               #e6e2d6;
  --surface-container-lowest:  #ffffff;  /* reserved — rarely used */
  --surface-container-low:     #fdf9f2;  /* subtle secondary area */
  --surface-container:         #f7f3eb;  /* standard interactive container */
  --surface-container-high:    #f1eee4;  /* inputs, denser surfaces */
  --surface-container-highest: #ece8dd;  /* high-focus / pressed state */
  --surface-variant:           #ece8dd;

  /* ----------------------------------------------------------
     COLOR — Ink (foregrounds)
     Desaturated warm inks — never pure black.
     ---------------------------------------------------------- */
  --on-surface:          #393831;  /* body text, headlines */
  --on-background:       #393831;
  --on-surface-variant:  #66645c;  /* secondary text, metadata */
  --outline:             #838178;  /* hairlines (rarely used) */
  --outline-variant:     #bcb9af;  /* softer hairlines */
  --inverse-surface:     #0f0e0c;  /* tooltips / inverse chrome */
  --inverse-on-surface:  #9f9c98;
  --inverse-primary:     #eceef2;

  /* ----------------------------------------------------------
     COLOR — Primary (deep forest ink — the brand color)
     #0F2A2E is the canonical Duvera primary, used for the
     logo, CTAs, active nav, focus accents, and wordmark.
     ---------------------------------------------------------- */
  --primary:                   #0f2a2e;
  --primary-dim:               #08191c;
  --on-primary:                #f6f8f7;
  --primary-container:         #cfdcdc;
  --on-primary-container:      #0f2a2e;
  --primary-fixed:             #cfdcdc;
  --primary-fixed-dim:         #b8cacb;
  --on-primary-fixed:          #08191c;
  --on-primary-fixed-variant:  #35494b;

  /* ----------------------------------------------------------
     COLOR — Secondary (warm taupe)
     Chips, soft affirmations, metadata pills.
     ---------------------------------------------------------- */
  --secondary:                   #66645e;
  --secondary-dim:               #5a5853;
  --on-secondary:                #ffffff;
  --secondary-container:         #e6e2db;
  --on-secondary-container:      #53524c;
  --secondary-fixed:             #e6e2db;
  --secondary-fixed-dim:         #d8d4cd;
  --on-secondary-fixed:          #413f3a;
  --on-secondary-fixed-variant:  #5d5b56;

  /* ----------------------------------------------------------
     COLOR — Tertiary (warm clay)
     The "emotional" palette. Reflection Pods, intimacy
     prompts, voice notes — anything that should feel warm.
     ---------------------------------------------------------- */
  --tertiary:                   #736057;
  --tertiary-dim:               #67544c;
  --on-tertiary:                #ffffff;
  --tertiary-container:         #fae0d5;  /* the "soft hug" peach */
  --on-tertiary-container:      #625047;
  --tertiary-fixed:             #fae0d5;
  --tertiary-fixed-dim:         #ebd2c7;
  --on-tertiary-fixed:          #4e3e36;
  --on-tertiary-fixed-variant:  #6c5951;

  /* ----------------------------------------------------------
     COLOR — Error (desaturated brick, never hot red)
     Used sparingly. Emotional regulation is a design goal.
     ---------------------------------------------------------- */
  --error:               #a64542;
  --error-dim:           #4e0309;
  --on-error:            #ffffff;
  --error-container:     #fe8983;
  --on-error-container:  #752121;

  --surface-tint: var(--primary);

  /* ----------------------------------------------------------
     TYPE — Families
     Two typefaces:
     · DM Sans  — brand wordmark, display, headlines (geometric humanist)
     · Manrope  — body copy, UI labels, messages (reading-optimized)
     ---------------------------------------------------------- */
  --font-brand:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-headline: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-body:     'Manrope', system-ui, -apple-system, sans-serif;
  --font-label:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:     ui-monospace, 'SFMono-Regular', Menlo, monospace; /* rare */
  --font-icon:     'Material Symbols Outlined';

  /* Wordmark letter-spacing — the brand "d u v e r a" look */
  --wordmark-tracking: 0.2em;

  /* Weights used */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;

  /* ----------------------------------------------------------
     TYPE — Scale (semantic roles)
     Prefer weight + color to signal hierarchy over drastic
     size changes. Keep things calm.
     ---------------------------------------------------------- */
  --display-lg-size:     3rem;     /* 48px — hero moments */
  --display-lg-lh:       1.1;
  --display-md-size:     2.25rem;  /* 36px */
  --display-md-lh:       1.15;

  --headline-lg-size:    2rem;     /* 32px — h1 */
  --headline-lg-lh:      1.2;
  --headline-md-size:    1.75rem;  /* 28px — h2 */
  --headline-md-lh:      1.25;
  --headline-sm-size:    1.5rem;   /* 24px — h3 */
  --headline-sm-lh:      1.3;

  --title-md-size:       1.125rem; /* 18px — app bar, cards */
  --title-md-lh:         1.4;
  --title-sm-size:       1rem;     /* 16px — section heads */
  --title-sm-lh:         1.4;

  --body-lg-size:        1.125rem; /* 18px — primary body */
  --body-lg-lh:          1.55;
  --body-md-size:        1rem;     /* 16px — core body; NEVER smaller for content */
  --body-md-lh:          1.55;
  --body-sm-size:        0.875rem; /* 14px — secondary content only */
  --body-sm-lh:          1.5;

  --label-md-size:       0.875rem; /* 14px — buttons, chips */
  --label-md-lh:         1.3;
  --label-sm-size:       0.75rem;  /* 12px — metadata, timestamps */
  --label-sm-lh:         1.3;

  /* ----------------------------------------------------------
     SHAPE — Corner radii (nothing is ever a hard 90°)
     ---------------------------------------------------------- */
  --radius-xs:  0.25rem;  /* 4px  — default (tiny chips, rare) */
  --radius-sm:  0.5rem;   /* 8px  */
  --radius-md:  0.75rem;  /* 12px — input fields */
  --radius-lg:  1rem;     /* 16px — mid containers */
  --radius-xl:  1.25rem;  /* 20px — message bubbles */
  --radius-2xl: 1.5rem;   /* 24px — cards, pods */
  --radius-3xl: 2rem;     /* 32px — bottom sheets */
  --radius-full: 9999px;  /* pills, chips, FABs */

  /* ----------------------------------------------------------
     SPACING — 4px base, 16px module. Generous breathing room.
     "If you think it has enough padding, add 8px more."
     ---------------------------------------------------------- */
  --space-1:  0.25rem; /* 4px */
  --space-2:  0.5rem;  /* 8px */
  --space-3:  0.75rem; /* 12px */
  --space-4:  1rem;    /* 16px — the module */
  --space-5:  1.25rem; /* 20px */
  --space-6:  1.5rem;  /* 24px */
  --space-8:  2rem;    /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */

  /* ----------------------------------------------------------
     ELEVATION — "Ambient Shadows" only. Soft room light.
     Color uses on-surface tint, never black.
     Opacity 3%–8%. Large blur. Small Y offset.
     ---------------------------------------------------------- */
  --shadow-xs: 0 4px 24px rgba(57, 56, 49, 0.04);
  --shadow-sm: 0 8px 24px rgba(57, 56, 49, 0.05);
  --shadow-md: 0 8px 32px rgba(57, 56, 49, 0.04);
  --shadow-lg: 0 12px 40px rgba(57, 56, 49, 0.08);
  --shadow-xl: 0 16px 48px rgba(57, 56, 49, 0.12);
  --shadow-fab: 0 12px 24px rgba(57, 56, 49, 0.15);
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.02);

  /* ----------------------------------------------------------
     MOTION — Unhurried. Fades and scale, never bounces.
     ---------------------------------------------------------- */
  --duration-fast:    150ms;
  --duration-base:    200ms;
  --duration-slow:    300ms;
  --duration-slower:  500ms;
  --ease-standard:    cubic-bezier(0.2, 0, 0, 1);     /* Material standard */
  --ease-emphasized:  cubic-bezier(0.3, 0, 0, 1);
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);

  /* ----------------------------------------------------------
     SIGNATURE EFFECTS
     ---------------------------------------------------------- */
  /* Micro-Gradient: primary CTAs. Feels like a river stone. */
  --micro-gradient: linear-gradient(135deg, var(--primary) 0%, var(--primary-dim) 100%);

  /* Glassmorphism — overlays, floating headers. */
  --glass-bg:     rgba(255, 251, 255, 0.8);
  --glass-blur:   blur(20px) saturate(140%);

  /* Backdrop halo tints — ambient background blurs */
  --halo-warm:  var(--surface-container);
  --halo-cool:  var(--surface-container-low);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — apply Duvera defaults to raw HTML.
   Opt-in via `.duvera` on body or any scope.
   ============================================================ */
.duvera,
.duvera * { box-sizing: border-box; }

.duvera {
  font-family: var(--font-body);
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--on-surface);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.duvera ::selection {
  background: var(--surface-variant);
  color: var(--on-surface);
}

.duvera h1 {
  font-family: var(--font-headline);
  font-size: var(--headline-lg-size);
  line-height: var(--headline-lg-lh);
  font-weight: var(--fw-medium);
  letter-spacing: -0.02em;
  color: var(--on-surface);
  margin: 0;
}
.duvera h2 {
  font-family: var(--font-headline);
  font-size: var(--headline-md-size);
  line-height: var(--headline-md-lh);
  font-weight: var(--fw-medium);
  letter-spacing: -0.015em;
  color: var(--on-surface);
  margin: 0;
}
.duvera h3 {
  font-family: var(--font-headline);
  font-size: var(--headline-sm-size);
  line-height: var(--headline-sm-lh);
  font-weight: var(--fw-regular);
  letter-spacing: -0.01em;
  color: var(--on-surface);
  margin: 0;
}
.duvera h4 {
  font-family: var(--font-body);
  font-size: var(--title-md-size);
  line-height: var(--title-md-lh);
  font-weight: var(--fw-semibold);
  color: var(--on-surface);
  margin: 0;
}

/* Wordmark — the brand "duvera" lettering */
.duvera-wordmark {
  font-family: var(--font-brand);
  font-weight: 400;
  letter-spacing: var(--wordmark-tracking);
  color: var(--primary);
  text-transform: lowercase;
  line-height: 1;
}

.duvera p {
  font-family: var(--font-body);
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-lh);
  color: var(--on-surface);
  text-wrap: pretty;
  margin: 0;
}

.duvera small,
.duvera .label {
  font-size: var(--label-sm-size);
  line-height: var(--label-sm-lh);
  color: var(--on-surface-variant);
  font-weight: var(--fw-medium);
}

.duvera a {
  color: var(--primary);
  text-decoration: none;
  font-weight: var(--fw-medium);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
.duvera a:hover {
  color: var(--primary-dim);
  border-bottom-color: var(--primary-dim);
}

/* Utility: the Micro-Gradient primary button */
.duvera-btn-primary {
  background: var(--micro-gradient);
  color: var(--on-primary);
  font-family: var(--font-label);
  font-weight: var(--fw-medium);
  padding: var(--space-4) var(--space-8);
  border: 0;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              opacity var(--duration-base) var(--ease-standard);
}
.duvera-btn-primary:hover   { box-shadow: var(--shadow-xl); transform: translateY(-1px); }
.duvera-btn-primary:active  { transform: scale(0.98); }

/* Material Symbols helper */
.duvera .icon,
.material-symbols-outlined {
  font-family: var(--font-icon);
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}