/* Design tokens, copied verbatim from design-system/tokens/{colors,typography,spacing,effects,base}.css.
   Fonts are linked from the HTML instead of @import, so they start downloading sooner. */
:root{
/* Android green ramp */
--green-50:#EAF9F0;--green-100:#CFF3DE;--green-200:#A4EAC2;--green-300:#6FE2A1;--green-500:#3DDC84;--green-600:#1FB866;--green-700:#12814A;--green-800:#0B5C34;--green-900:#06341E;
/* Navy (Android dark blue) */
--navy-50:#E6EEF1;--navy-100:#C3D5DC;--navy-500:#20556B;--navy-700:#0E3E52;--navy-900:#073042;
/* Folder blue — from the app icon */
--blue-50:#EDF6FE;--blue-100:#D6EBFC;--blue-300:#5DB3F2;--blue-500:#2F8FDB;--blue-700:#1A66A8;
/* Expressive pastel accents */
--sky-100:#D7EFFE;--sky-300:#9FD6FC;--sky-700:#0B57D0;
--lime-100:#EEF7CE;--lime-300:#D5EB86;
--peach-100:#FFE4D6;--peach-300:#FFB894;
--lilac-100:#ECE3FC;--lilac-300:#C9B4F5;
/* Neutrals */
--black:#000000;--gray-950:#1F1F1F;--gray-800:#303030;--gray-700:#444746;--gray-500:#747775;--gray-400:#9AA09D;--gray-300:#C4C7C5;--gray-200:#E3E3E3;--gray-100:#F1F3F4;--gray-50:#F8F9FA;--white:#FFFFFF;
/* Semantic */
--red-100:#FCE8E6;--red-600:#B3261E;--amber-100:#FEF3CD;--amber-500:#F9AB00;--amber-800:#7A4F01;

/* Semantic aliases */
--brand:var(--green-500);--brand-strong:var(--green-700);--brand-ink:var(--green-900);--brand-tint:var(--green-50);
--text-1:var(--gray-950);--text-2:var(--gray-700);--text-3:var(--gray-500);--text-inverse:var(--white);--text-on-brand:var(--gray-950);--text-link:var(--green-800);
--surface-page:var(--white);--surface-1:var(--gray-50);--surface-2:var(--gray-100);--surface-card:var(--gray-100);--surface-inverse:var(--gray-950);--surface-brand:var(--green-500);--surface-brand-tint:var(--green-50);--surface-folder:var(--blue-300);--surface-folder-back:var(--blue-500);--surface-scrim:rgba(0,0,0,.32);
--border-1:var(--gray-200);--border-2:var(--gray-300);--border-strong:var(--gray-950);--focus-ring:var(--green-700);
--state-hover:rgba(31,31,31,.08);--state-press:rgba(31,31,31,.12);--state-hover-inverse:rgba(255,255,255,.12);
--success:var(--green-700);--success-tint:var(--green-50);--warning:var(--amber-500);--warning-ink:var(--amber-800);--warning-tint:var(--amber-100);--danger:var(--red-600);--danger-tint:var(--red-100);--info:var(--sky-700);--info-tint:var(--sky-100);
}
:root{
--font-sans:"Google Sans Flex","Google Sans","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-display:var(--font-sans);
--font-mono:"Google Sans Code","SF Mono",ui-monospace,Menlo,Consolas,monospace;
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
/* Display — marketing headlines (sentence case, trailing period) */
--type-display-xl:700 96px/1.0 var(--font-display);--tracking-display-xl:-0.035em;
--type-display-l:700 72px/1.04 var(--font-display);--tracking-display-l:-0.03em;
--type-display-m:700 56px/1.07 var(--font-display);--tracking-display-m:-0.025em;
/* Headlines */
--type-headline-l:700 40px/1.15 var(--font-sans);--tracking-headline:-0.02em;
--type-headline-m:700 32px/1.2 var(--font-sans);
--type-headline-s:600 24px/1.25 var(--font-sans);
/* Titles — app UI */
--type-title-l:500 20px/1.3 var(--font-sans);
--type-title-m:500 16px/1.4 var(--font-sans);
--type-title-s:500 14px/1.4 var(--font-sans);
/* Body */
--type-body-l:400 18px/1.55 var(--font-sans);
--type-body-m:400 16px/1.5 var(--font-sans);
--type-body-s:400 14px/1.45 var(--font-sans);
/* Labels */
--type-label-l:500 16px/1.25 var(--font-sans);
--type-label-m:500 14px/1.2 var(--font-sans);
--type-label-s:500 12px/1.2 var(--font-sans);
--type-eyebrow:500 14px/1.2 var(--font-sans);
--type-mono:400 13px/1.5 var(--font-mono);
}
:root{
--space-0:0;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:20px;--space-7:24px;--space-8:32px;--space-9:40px;--space-10:48px;--space-11:64px;--space-12:80px;--space-13:120px;--space-14:160px;
--radius-xs:4px;--radius-s:8px;--radius-m:12px;--radius-l:16px;--radius-xl:24px;--radius-2xl:32px;--radius-3xl:48px;--radius-full:999px;
--control-h-s:32px;--control-h-m:40px;--control-h-l:48px;--control-h-xl:56px;
--container-max:1440px;--gutter:clamp(20px,4vw,72px);/* @kind spacing */
--app-titlebar-h:48px;--app-sidebar-w:280px;--app-row-h:48px;
}
:root{
--shadow-0:none;
--shadow-1:0 1px 2px rgba(0,0,0,.08),0 1px 3px 1px rgba(0,0,0,.05);
--shadow-2:0 2px 6px 2px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.10);
--shadow-3:0 8px 24px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.06);
--shadow-4:0 24px 64px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.08);
--ease-standard:cubic-bezier(0.2,0,0,1);/* @kind other */
--ease-emphasized:cubic-bezier(0.05,0.7,0.1,1);/* @kind other */
--ease-exit:cubic-bezier(0.3,0,1,1);/* @kind other */
--ease-spring:cubic-bezier(0.34,1.4,0.64,1);/* @kind other */
--dur-fast:120ms;/* @kind other */--dur-base:200ms;/* @kind other */--dur-slow:350ms;/* @kind other */--dur-slower:500ms;/* @kind other */
--blur-glass:saturate(180%) blur(20px);/* @kind other */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--type-body-m);color:var(--text-1);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--brand-ink)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--green-200)}