/* Manrope (UI type) + Material Symbols Outlined (icons), served from Google Fonts. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

:root {
  /* Ground — the app is dark-only */
  --gg-ink-1000: #07070a;   /* deepest page ground (Priorities) */
  --gg-ink-950: #090a0d;    /* page ground (Welcome) */
  --gg-ink-900: #0c0e14;    /* gradient floor of selected cards */
  --gg-ink-850: #11121d;    /* panel */
  --gg-ink-800: #12141c;    /* card (surface-card-neutral) */
  --gg-ink-750: #171926;    /* row inside panel */
  --gg-ink-700: #181b26;    /* card hover (surface-card-interactive) */
  --gg-ink-650: #1e2230;    /* inset metrics, progress tracks */

  /* Text */
  --gg-white: #ffffff;
  --gg-gray-300: #d1d5db;   /* body on selected cards */
  --gg-gray-400: #94a3b8;   /* text-secondary: body, descriptions, labels */
  --gg-gray-450: #94a3b8;   /* body on idle cards */
  --gg-gray-500: #8e8e93;
  --gg-gray-600: #64748b;   /* text-muted: timestamps, inactive steps */

  /* Brand */
  --gg-cyan: #00e5db;       /* primary accent, Focus domain */
  --gg-cyan-hi: #00f5ea;
  --gg-cyan-lo: #00b3a9;
  --gg-teal: #00a89f;       /* brand teal (Welcome CTA) */
  --gg-teal-deep: #00847e;
  --gg-coral: #ff6a3d;
  --gg-rose: #e94e77;

  /* Cognitive domains — one color per training goal */
  --gg-domain-focus: #00e5db;
  --gg-domain-flexibility: #ff9f0a;  /* Sun Amber */
  --gg-domain-problem: #bf5af2;
  --gg-domain-memory: #ff9500;       /* Neon Gold */
  --gg-domain-speed: #ff375f;
  --gg-domain-composure: #30d158;

  /* Lines */
  --gg-line-faint: rgba(255,255,255,0.05);
  --gg-line: rgba(255,255,255,0.08);
  --gg-line-strong: rgba(255,255,255,0.16);
  --gg-fill-glass: rgba(255,255,255,0.10);
  --gg-fill-hover: rgba(255,255,255,0.05);

  /* Semantic aliases */
  --bg-page: var(--gg-ink-1000);
  --bg-hero: var(--gg-ink-950);
  --surface-card: var(--gg-ink-800);
  --surface-card-hover: var(--gg-ink-700);
  --surface-panel: var(--gg-ink-850);
  --surface-row: var(--gg-ink-750);
  --text-primary: var(--gg-white);
  --text-secondary: var(--gg-gray-300);
  --text-muted: var(--gg-gray-400);
  --text-subtle: var(--gg-gray-450);
  --text-disabled: var(--gg-gray-600);
  --text-on-accent: #050608;
  --accent: var(--gg-cyan);
  --danger: var(--gg-domain-speed);

  /* Gradients */
  --grad-cta: linear-gradient(135deg, var(--gg-cyan) 0%, var(--gg-teal-deep) 100%);
  --surface-track: var(--gg-ink-650);
  --starfield: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 80% 10%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 70%, #fff, transparent), radial-gradient(1px 1px at 60% 40%, #fff, transparent), radial-gradient(1.5px 1.5px at 90% 80%, #fff, transparent), radial-gradient(1px 1px at 45% 85%, #fff, transparent), radial-gradient(1px 1px at 15% 55%, #fff, transparent), radial-gradient(1px 1px at 70% 65%, #fff, transparent), radial-gradient(1px 1px at 25% 35%, #fff, transparent), radial-gradient(1px 1px at 85% 45%, #fff, transparent), radial-gradient(ellipse at 50% -10%, #132046 0%, var(--gg-ink-1000) 60%);
  --grad-cta-teal: linear-gradient(90deg, var(--gg-teal-deep), var(--gg-teal));
  --grad-hero-scrim: linear-gradient(0deg, var(--gg-ink-950) 0%, rgba(9,10,13,0.8) 45%, rgba(0,0,0,0.35) 100%);
  --grad-hero-top: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 50%);
}

:root {
  --font-ui: "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --font-icon: "Material Symbols Outlined";

  --type-display-size: 38px;  --type-display-lh: 1.06;  --type-display-weight: 800; --type-display-track: -0.025em;
  --type-headline-size: 34px; --type-headline-lh: 1.08; --type-headline-weight: 800; --type-headline-track: -0.025em;
  --type-title-size: 17px;    --type-title-lh: 1.25;    --type-title-weight: 800;
  --type-card-title-size: 16px;
  --type-body-lg-size: 15px;  --type-body-lg-lh: 1.375; --type-body-lg-weight: 500;
  --type-body-size: 12px;     --type-body-lh: 1.375;    --type-body-weight: 400;
  --type-button-size: 18px;   --type-button-weight: 800; --type-button-track: 0.025em;
  --type-label-size: 11px;    --type-label-weight: 700; --type-label-track: 0.05em;
  --type-eyebrow-size: 12px;  --type-eyebrow-weight: 800; --type-eyebrow-track: 0.1em;
}

:root {
  --space-xs: 4px; --space-base: 8px; --space-sm: 12px; --space-14: 14px; --space-gutter: 16px;
  --space-md: 20px; --space-24: 24px; --space-lg: 32px; --space-xl: 48px;
  --page-pad: 20px;  /* screen side margin */

  --radius-sm: 8px; --radius-tile: 12px; --radius-card: 18px; --radius-panel: 24px;
  --radius-pill: 9999px; --radius-device: 48px;

  --shadow-panel: 0 12px 32px rgba(0,0,0,0.6);
  --glow-cta: 0 12px 28px -6px rgba(0,229,219,0.4);
  --glow-cta-hover: 0 14px 34px -6px rgba(0,229,219,0.6);
  --glow-text: 0 0 24px rgba(0,229,219,0.55);
  --text-shadow-hero: 0 2px 14px rgba(0,0,0,0.85);

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 150ms; --dur: 200ms;
  --press-scale: 0.97; --press-scale-cta: 0.98;
  --device-w: 393px; --device-h: 852px;
}

html, body { background: var(--bg-page); color: var(--text-primary); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; margin: 0; }
.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; direction: ltr; -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }
::selection { background: var(--gg-cyan); color: #000; }
:focus-visible { outline: 2px solid var(--gg-cyan); outline-offset: 2px; }
@keyframes gg-pulse { 50% { opacity: .4; } }
@keyframes gg-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes gg-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes gg-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes gg-sprint { 0%,100% { box-shadow: inset 0 0 0 0 rgba(255,55,95,0); } 50% { box-shadow: inset 0 0 0 8px rgba(255,55,95,0.14); } }
@keyframes gg-tap { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px) scale(0.92); } }