/* ============================================================
   AIEssy · Design Tokens
   Late-night study lamp — dark canvas + warm apricot accent
   ============================================================ */

:root {
  /* Surfaces */
  --bg: #0B0D11;
  --bg-elev-0: #0F1217;
  --surface: #15191F;
  --surface-2: #1C2027;
  --surface-3: #242932;
  --surface-glass: rgba(20, 23, 28, 0.72);

  /* Borders */
  --hairline: rgba(255, 255, 255, 0.04);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* Text */
  --text: #F1ECE0;
  --text-soft: #DDD6C8;
  --text-dim: #9C958A;
  --text-mute: #6A6457;
  --text-faint: #4A463E;
  --text-on-accent: #1A0E04;

  /* Brand accent — warm apricot / lamplight */
  --accent: #FFA66B;
  --accent-deep: #FF7A33;
  --accent-soft: #FFCBA0;
  --accent-glow: rgba(255, 166, 107, 0.14);
  --accent-trace: rgba(255, 166, 107, 0.06);

  /* Signal colors */
  --good: #8FE0A8;
  --good-bg: rgba(143, 224, 168, 0.10);
  --good-border: rgba(143, 224, 168, 0.24);

  --warn: #FFD27A;
  --warn-bg: rgba(255, 210, 122, 0.10);
  --warn-border: rgba(255, 210, 122, 0.24);

  --crit: #FF8A95;
  --crit-bg: rgba(255, 138, 149, 0.10);
  --crit-border: rgba(255, 138, 149, 0.24);

  --info: #7CC2FF;
  --info-bg: rgba(124, 194, 255, 0.10);
  --info-border: rgba(124, 194, 255, 0.24);

  /* Scholarship type tints */
  --lpdp: #FFA66B;
  --aas: #7CC2FF;
  --chev: #C9A6FF;

  /* Type */
  --font-sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (mobile) */
  --t-display-xl: 56px;
  --t-display: 36px;
  --t-h1: 28px;
  --t-h2: 22px;
  --t-h3: 18px;
  --t-h4: 16px;
  --t-body: 15px;
  --t-small: 13px;
  --t-xsmall: 12px;
  --t-kicker: 11px;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 96px;

  /* Radii */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-pill: 999px;

  /* Shadows / glow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 20px -4px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.30);
  --glow-accent: 0 0 0 1px rgba(255, 166, 107, 0.20), 0 12px 36px -6px rgba(255, 166, 107, 0.30);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --device-w: 100%;
  --device-max-w: 960px;
}

/* Desktop type adjustments */
@media (min-width: 640px) {
  :root {
    --t-display-xl: 64px;
    --t-display: 42px;
    --t-h1: 34px;
    --t-h2: 26px;
    --t-h3: 20px;
    --t-body: 16px;
  }
}

/* Reset / base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" 1, "cv11" 1;
}
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--text-on-accent); }

/* Utility */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "ss01" 1; }
.kicker {
  font-family: var(--font-mono);
  font-size: var(--t-kicker);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
}
.tnum { font-variant-numeric: tabular-nums; }

/* Scrollbar (dark, subtle) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }