/*
 * Vosa Loop — design tokens (canonical source of truth)
 *
 * Everything visual references these variables. Change a value here and it
 * propagates everywhere. When we add Tailwind/shadcn later, the Tailwind theme
 * reads from these same names — this file stays the single source.
 *
 * Feel: warm paper, soft squircles, confident black actions, playful accents.
 * Two fonts only — Sora (display/brand, used sparingly) + Inter (everything else).
 *
 * Fonts: the preview loads these from Google Fonts via <link>. In the app,
 * preload with <link rel="preconnect"> + <link> in index.html; before shipping
 * inside Capacitor, self-host the .woff2 so it works offline.
 */

:root {
  /* ---- Surfaces (warm, never pure white) ---- */
  --paper: #f1e9da;          /* page background — the "human" base */
  --surface: #fbf6ed;        /* raised cards, sheets */
  --surface-sunken: #e9dfcd; /* wells, inset areas, image placeholders */

  /* ---- Ink (warm near-black, never #000) ---- */
  --ink: #211d16;            /* primary text + primary action fill */
  --ink-soft: #6d6452;       /* secondary text */
  --ink-faint: #a89c84;      /* hints, captions, disabled */
  --on-ink: #fbf6ed;         /* text/icons on top of --ink */

  /* ---- Hairlines ---- */
  --line: rgba(33, 29, 22, 0.10);
  --line-strong: rgba(33, 29, 22, 0.18);

  /* ---- Accents (the playful collage palette) ---- */
  --saffron: #f0c64a;        --saffron-ink: #5c4708;
  --coral: #e27a4e;          --coral-ink: #6e2c12;
  --iris: #93a4ea;           --iris-ink: #2c3578;   /* periwinkle (blue-leaning) */
  --lavender: #b4a2d8;       --lavender-ink: #463473; /* violet-leaning */
  --sage: #a7bd92;           --sage-ink: #38491f;

  /* Brand accent = coral. The one warm color that says "Vosa Loop".
     Used for the hero voice button and small brand moments. */
  --brand: var(--coral);
  --brand-ink: var(--coral-ink);
  --brand-tint: #f7e3d7;     /* coral at ~12% — soft fills, selected states */

  /* ---- Radius (generous → squircle feel) ---- */
  --r-1: 12px;   /* chips, small inputs */
  --r-2: 18px;   /* buttons, list rows */
  --r-3: 26px;   /* cards */
  --r-4: 34px;   /* big cards, sheets, media */
  --r-pill: 999px;

  /* ---- Spacing (4px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* ---- Type ---- */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --t-display: 30px;   /* screen hero (Sora) */
  --t-title: 23px;     /* section/screen title (Sora) */
  --t-heading: 18px;   /* card heading */
  --t-body: 16px;      /* body — never smaller for learner-facing copy */
  --t-small: 14px;
  --t-caption: 12.5px;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.55;

  /* ---- Soft depth (subtle — paper, not plastic) ---- */
  --shadow-soft: 0 1px 2px rgba(33, 29, 22, 0.04),
                 0 10px 24px -14px rgba(33, 29, 22, 0.22);
  --shadow-lift: 0 2px 6px rgba(33, 29, 22, 0.06),
                 0 18px 40px -18px rgba(33, 29, 22, 0.28);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 220ms;

  /* ---- Decal (the "screenprint" look: bold ink edges + hard-offset shadows) ----
     Promoted from the marketing landing page so the app, the landing, and the
     prototype share one source. Use selectively: primary buttons and hero cards
     wear the full decal; dense/secondary surfaces stay on the soft --line +
     --shadow-soft tokens above so screens don't get noisy. */
  --edge: 2.5px solid var(--ink);     /* bold block border */
  --hard: 3px 3px 0 var(--ink);       /* hard-offset shadow, no blur */
  --hard-lg: 5px 5px 0 var(--ink);    /* lifted state */

  /* ---- Bookend fields (the loop's edges get a full-bleed color so the learner
     feels they've crossed into something different: the loop START / next-loop
     looks forward = green; the loop CLOSE looks back = blue; the profile review
     = lavender). Kept here so the three screens share one source. */
  --next-green: #d8e6c9;      --next-greenink: #38491f;
  --close-blue: #dde4f8;      --close-blueink: #2c3578;
  --profile-purple: #e7e1f4;
}

/* Base reset for app-level use (the preview scopes its own). */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}