/* Simpiller design system — tokens + base, flattened for deployment.
   Source of truth: styles.css + tokens/*.css in the Simpiller design system project. */

/* ---------- tokens/fonts.css ---------- */
/* Simpiller webfonts.
   No brand font files were supplied with the source material, so these are the
   closest Google Fonts matches to the logotype's geometric, open-aperture feel.
   SUBSTITUTION — replace with licensed brand files if they exist. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Figtree:ital,wght@0,300..900;1,300..900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- tokens/colors.css ---------- */
:root {
  /* ---- Brand blue: sampled straight off the Simpiller capsule mark ---- */
  --blue-50:  #f2f7fe;
  --blue-100: #e1ecfd;
  --blue-200: #c5e1fc;
  --blue-300: #a9cbf9;
  --blue-400: #8fb6f6;
  --blue-500: #5a8df1;
  --blue-600: #2865ec; /* core brand blue */
  --blue-700: #1e51c6;
  --blue-800: #1a419c;
  --blue-900: #16346f;
  --blue-950: #0e2044;

  /* ---- Ice: the bright seam down the middle of the mark ---- */
  --ice-50:  #f4fdff;
  --ice-100: #e1f7ff;
  --ice-200: #c3eefc;
  --ice-300: #9ce0f7;

  /* ---- Cool neutrals (ink) ---- */
  --ink-950: #0a1220;
  --ink-900: #0e1726;
  --ink-800: #1b2942;
  --ink-700: #2b3a52;
  --ink-600: #44546e;
  --ink-500: #5a6b85;
  --ink-400: #8494ab;
  --ink-300: #b9c4d4;
  --ink-200: #dce3ed;
  --ink-100: #edf1f7;
  --ink-50:  #f6f8fb;
  --white:   #ffffff;

  /* ---- Semantic status (adherence states live here) ---- */
  --green-600: #12885e; /* taken / on track */
  --green-100: #dcf5ea;
  --amber-600: #b8730c; /* due / attention */
  --amber-100: #fdf0d8;
  --red-600:   #c93a3a; /* missed / destructive */
  --red-100:   #fbe4e4;
  --violet-600:#6d4bd6; /* streaks & engagement */
  --violet-100:#ece6fb;

  /* ---- Signature gradients (mark-derived; use sparingly) ---- */
  --grad-capsule: linear-gradient(90deg, #ddf4fe 0%, #a9cbf9 42%, #5a8df1 68%, #2865ec 100%);
  --grad-brand:   linear-gradient(135deg, #2865ec 0%, #1a419c 100%);
  --grad-wash:    linear-gradient(180deg, #f4fdff 0%, #f2f7fe 45%, #ffffff 100%);

  /* ---- Semantic aliases: use THESE in product code ---- */
  --brand:            var(--blue-600);
  --brand-hover:      var(--blue-700);
  --brand-press:      var(--blue-800);
  --brand-subtle:     var(--blue-50);
  --brand-subtle-2:   var(--blue-100);
  --brand-border:     var(--blue-200);
  --on-brand:         var(--white);

  --text-strong:  var(--ink-900);
  --text-body:    var(--ink-700);
  --text-muted:   var(--ink-500);
  --text-faint:   var(--ink-400);
  --text-on-dark: var(--white);
  --text-link:    var(--blue-700);
  --text-link-hover: var(--blue-800);

  --surface-page:      var(--ink-50);
  --surface-card:      var(--white);
  --surface-sunken:    var(--ink-100);
  --surface-inverse:   var(--ink-900);
  --surface-brand-deep:var(--blue-900);
  --surface-ice:       var(--ice-100);

  --border-hairline: var(--ink-200);
  --border-strong:   var(--ink-300);
  --border-focus:    var(--blue-600);

  --state-taken-fg: var(--green-600);  --state-taken-bg: var(--green-100);
  --state-due-fg:   var(--amber-600);  --state-due-bg:   var(--amber-100);
  --state-missed-fg:var(--red-600);    --state-missed-bg:var(--red-100);
  --state-streak-fg:var(--violet-600); --state-streak-bg:var(--violet-100);
}

/* ---------- tokens/typography.css ---------- */
:root {
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-text: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Display — Sora. Always tightened tracking, never below 600 weight. */
  --display-1-size: 68px; --display-1-lh: 1.02; --display-1-ls: -0.03em; --display-1-weight: 600;
  --display-2-size: 52px; --display-2-lh: 1.06; --display-2-ls: -0.025em; --display-2-weight: 600;
  --display-3-size: 40px; --display-3-lh: 1.1;  --display-3-ls: -0.02em; --display-3-weight: 600;

  /* Headings — Sora */
  --h1-size: 32px; --h1-lh: 1.15; --h1-ls: -0.018em; --h1-weight: 600;
  --h2-size: 25px; --h2-lh: 1.22; --h2-ls: -0.014em; --h2-weight: 600;
  --h3-size: 20px; --h3-lh: 1.3;  --h3-ls: -0.01em;  --h3-weight: 600;

  /* Text — Figtree */
  --body-lg-size: 19px; --body-lg-lh: 1.58;
  --body-size:    16px; --body-lh:    1.6;
  --body-sm-size: 14px; --body-sm-lh: 1.5;
  --caption-size: 12.5px; --caption-lh: 1.4; --caption-ls: 0.01em;

  /* Eyebrow / label — Figtree, uppercase, wide */
  --eyebrow-size: 12px; --eyebrow-ls: 0.14em; --eyebrow-weight: 700;
  --label-size: 13.5px; --label-weight: 600; --label-ls: 0.005em;

  /* Numeric — IBM Plex Mono for doses, times, MRNs, invoice numbers */
  --data-size: 14px; --data-ls: -0.01em;

  --weight-light: 300; --weight-regular: 400; --weight-medium: 500;
  --weight-semibold: 600; --weight-bold: 700;
}

/* ---------- tokens/spacing.css ---------- */
:root {
  /* 4px base grid. Simpiller layouts are airy: default gaps are 16/24. */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radii — capsule-first, echoing the mark */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --control-h-sm: 34px;
  --control-h-md: 42px;
  --control-h-lg: 52px;

  --container-page: 1200px;
  --container-text: 68ch;
  --gutter: 24px;
  --sidebar-w: 248px;
  --topbar-h: 64px;
  --border-w: 1px;
  --border-w-strong: 1.5px;
  --focus-ring-w: 3px;
}

/* ---------- tokens/elevation.css ---------- */
:root {
  /* Shadows are cool-tinted (blue-black), never neutral grey. Low and soft. */
  --shadow-xs: 0 1px 2px rgba(14, 32, 68, 0.06);
  --shadow-sm: 0 1px 2px rgba(14, 32, 68, 0.05), 0 2px 6px rgba(14, 32, 68, 0.05);
  --shadow-md: 0 2px 4px rgba(14, 32, 68, 0.05), 0 8px 20px rgba(14, 32, 68, 0.07);
  --shadow-lg: 0 4px 8px rgba(14, 32, 68, 0.05), 0 18px 40px rgba(14, 32, 68, 0.10);
  --shadow-brand: 0 6px 18px rgba(40, 101, 236, 0.24);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --ring-focus: 0 0 0 3px rgba(40, 101, 236, 0.28);
  --ring-danger: 0 0 0 3px rgba(201, 58, 58, 0.24);
}

/* ---------- tokens/motion.css ---------- */
:root {
  /* Calm and quick. Nothing bounces — this is a clinical product. */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-instant: 90ms;
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
  --transition-control: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}

/* ---------- tokens/base.css ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-strong); margin: 0; }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-xs); }

code, kbd, .sp-data { font-family: var(--font-mono); font-size: var(--data-size); letter-spacing: var(--data-ls); }

::selection { background: var(--blue-200); color: var(--ink-900); }