/* =============================================================
   RagmyAI — Colors & Type
   Monochrome, minimal. Lato throughout. Inspired by ChatGPT-style
   conversational UI. All semantic tokens reference base tokens
   below so dark mode is a one-line swap.
   ============================================================= */

/* ---------- Web fonts ----------
   Local files supplied by the brand: Lato Regular (400), Lato Semibold (600).
   Heavier display weights (700 Bold, 900 Black) and Light (300) fall back to
   Google Fonts until the brand supplies those files.
   ⚠️ TODO: replace the @import below with self-hosted Lato Black / Bold / Light
   when the brand sends those .ttf files.
*/
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Lato-Regular.woff2') format('woff2'),
       url('../fonts/Lato-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Lato-Semibold.woff2') format('woff2'),
       url('../fonts/Lato-Semibold.ttf') format('truetype');
}
/* Fallback weights — remove this @import once 300/700/900 are provided locally. */
/* Google Fonts loaded via <link> in HTML */

:root {
  /* ============================================
     BASE COLOR TOKENS — Monochrome scale
     ============================================ */

  /* Pure tones */
  --ink-0:   #000000;       /* logo / brand black */
  --ink-50:  #0A0A0A;       /* near-black UI fills (dark mode bg) */
  --ink-100: #1A1A1A;       /* primary text */
  --ink-200: #2C2C2C;       /* heavy chrome */
  --ink-300: #4A4A4A;       /* strong secondary text */
  --ink-400: #6B6B6B;       /* secondary text (timestamps, hints) */
  --ink-500: #9A9A9A;       /* tertiary text, placeholder */
  --ink-600: #BDBDBD;       /* disabled icon */
  --ink-700: #D9D9D9;       /* borders, dividers */
  --ink-800: #E8E8E8;       /* user bubble bg (light) */
  --ink-850: #F0F0F0;       /* surface raised */
  --ink-900: #F6F6F6;       /* surface alt */
  --ink-950: #FAFAFA;       /* surface */
  --paper:   #FFFFFF;       /* background */

  /* Accent (used very sparingly — embed/web-only) */
  --accent-blue:   #1A8CFF; /* the only blue used; CTA on landing only */
  --accent-blue-2: #4DA8FF;

  /* Functional / semantic */
  --success: #1F7A4C;
  --danger:  #C0392B;
  --warning: #B8860B;

  /* ============================================
     SEMANTIC TOKENS — Light (default)
     ============================================ */

  /* Surfaces */
  --bg:            var(--paper);
  --bg-alt:        var(--ink-950);
  --bg-raised:     var(--ink-900);
  --bg-inverse:    var(--ink-0);

  /* Foreground / text */
  --fg-1:          var(--ink-100);      /* primary text, titles */
  --fg-2:          var(--ink-300);      /* body, secondary */
  --fg-3:          var(--ink-400);      /* tertiary, captions */
  --fg-4:          var(--ink-500);      /* placeholder, disabled */
  --fg-on-inverse: var(--paper);

  /* Lines */
  --border:        var(--ink-700);
  --border-strong: var(--ink-600);
  --divider:       var(--ink-800);

  /* Bubbles */
  --bubble-user-bg:   var(--ink-800);   /* light grey pill */
  --bubble-user-fg:   var(--ink-100);
  --bubble-ai-bg:     transparent;       /* AI is plain text */
  --bubble-ai-fg:     var(--ink-100);

  /* Controls */
  --toggle-on:    var(--ink-100);
  --toggle-off:   var(--ink-700);
  --icon:         var(--ink-100);
  --icon-muted:   var(--ink-400);

  /* Focus / selection */
  --focus-ring:   var(--ink-200);
  --selection:    rgba(0, 0, 0, 0.08);

  /* ============================================
     TYPOGRAPHY — Base
     ============================================ */
  --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-bold:     700;
  --fw-black:    900;

  /* Type scale — designed for mobile-first chat UI */
  --t-display:   34px;   /* marketing / store screenshots */
  --t-h1:        28px;   /* screen title */
  --t-h2:        22px;   /* section title */
  --t-h3:        18px;   /* row title */
  --t-body-lg:   17px;   /* chat message */
  --t-body:      15px;   /* default body */
  --t-body-sm:   14px;   /* dense rows, sub-text */
  --t-caption:   13px;   /* timestamps, hints */
  --t-micro:     11px;   /* eyebrow labels, all-caps */

  --lh-tight:    1.2;
  --lh-snug:     1.35;
  --lh-normal:   1.5;
  --lh-relaxed:  1.6;

  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.08em;

  /* ============================================
     SPACING + RADII + SHADOW + MOTION
     ============================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;     /* chat bubble */
  --radius-pill: 999px;
  --radius-squircle: 28%; /* logo container */

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-floating: 0 12px 32px rgba(0, 0, 0, 0.12);

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   260ms;
}

/* ============================================
   Dark mode (voice/avatar surfaces, embed dark)
   ============================================ */
:root[data-theme='dark'],
.theme-dark {
  --bg:            var(--ink-50);
  --bg-alt:        var(--ink-100);
  --bg-raised:     var(--ink-200);
  --bg-inverse:    var(--paper);

  --fg-1:          var(--paper);
  --fg-2:          var(--ink-700);
  --fg-3:          var(--ink-600);
  --fg-4:          var(--ink-500);
  --fg-on-inverse: var(--ink-100);

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --divider:       var(--ink-200);

  --bubble-user-bg: var(--ink-200);
  --bubble-user-fg: var(--paper);
  --bubble-ai-fg:   var(--paper);

  --toggle-on:  var(--paper);
  --toggle-off: var(--ink-300);
  --icon:       var(--paper);
  --icon-muted: var(--ink-500);
}

/* ============================================
   SEMANTIC TYPOGRAPHIC ELEMENTS
   Use these classes (or :where on elements) to apply.
   ============================================ */

.t-display, .ragmy-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-h1, h1.ragmy {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-h2, h2.ragmy {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-h3, h3.ragmy {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--t-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.t-body, p.ragmy {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.t-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--t-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--t-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--t-micro);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-section-label {
  /* The light-grey "Personalization", "Long-term Memory" labels */
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--t-body-sm);
  color: var(--fg-3);
}

.t-mono, code.ragmy {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-900);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  color: var(--fg-1);
}

/* Utility */
.ragmy-reset {
  font-family: var(--font-sans);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}