/* Design tokens: the single source of truth for colours, fonts, radii and spacing.
   Dark-only, developer/terminal themed. Reference everything below via var(--app-*). */
:root {
    /* Surfaces (near-black, slight blue — IDE feel) */
    --app-bg: #0b0f17;
    --app-bg-soft: #0d1117;
    --app-surface: #11161f;
    --app-surface-2: #161b22;
    --app-elevated: #1b222c;
    --app-border: rgba(139, 163, 184, 0.18);
    --app-border-strong: rgba(139, 163, 184, 0.32);

    /* Text */
    --app-text: #c9d1d9;
    --app-text-strong: #f0f6fc;
    --app-muted: #8b949e;
    /* Lightened from #6e7681 to clear WCAG AA (4.5:1) for small text on the
       elevated surfaces where --app-faint is used. */
    --app-faint: #848d97;

    /* Accents — green is the terminal signature, blue carries links */
    --app-green: #56d364;
    --app-green-strong: #238636;
    --app-green-hover: #2ea043;
    --app-green-contrast: #eafbe9;
    --app-green-soft: rgba(86, 211, 100, 0.12);
    --app-link: #58a6ff;
    --app-link-hover: #79c0ff;
    --app-link-soft: rgba(88, 166, 255, 0.12);

    /* Semantic states */
    --app-info: #58a6ff;
    --app-info-bg: rgba(88, 166, 255, 0.1);
    --app-success: #3fb950;
    --app-success-bg: rgba(63, 185, 80, 0.12);
    --app-warning: #d29922;
    --app-warning-bg: rgba(210, 153, 34, 0.12);
    --app-danger: #f85149;
    --app-danger-bg: rgba(248, 81, 73, 0.12);

    /* Typography — system stacks only (CSP forbids external web fonts) */
    --app-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --app-font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "Fira Code", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

    /* Radii — near-square geometry (terminal/editor feel; pill kept for the
       rare genuinely-round element, but unused on buttons/badges/tags). */
    --app-radius-sm: 2px;
    --app-radius: 3px;
    --app-radius-lg: 4px;
    --app-radius-pill: 999px;

    /* Terminal window chrome */
    --app-term-titlebar: var(--app-surface-2);

    /* Elevation (kept subtle and flat) */
    --app-shadow: 0 10px 34px rgba(1, 4, 9, 0.5);

    /* Layout — focused reading pane: the window hugs one unified column width
       (article == prose) so there is no stepped width / stranded right gutter. */
    --app-content-width: 1020px;
    --app-prose-width: 60rem;
    --app-article-width: 60rem;
    --app-rail-width: 16rem;

    /* Motion */
    --app-transition: 150ms ease;

    /* Google sign-in button (brand-mandated light surface; kept as tokens so
       components.css stays hex-free). */
    --app-google-bg: #ffffff;
    --app-google-bg-hover: #f2f2f2;
    --app-google-text: #1f1f1f;
}