/*
 * PPP: tokens.css (generated)
 * Generated by Pi Pocket from .pi/design/. Do not edit by hand: change the tokens, then compile again.
 * Modes: dark (default), light.
 * Use it:  <link rel="stylesheet" href="ds/tokens.css">  then  color: var(--color-text-primary);
 * Switch a mode with <html data-theme="light">. Without data-theme, the system's light setting applies.
 */

:root,
[data-theme="dark"] {
    color-scheme: dark;

    /* === Primitives === */

    /* color */
    --color-white: #ffffff;

    /* color.slate */
    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;
    --color-slate-950: #020617;

    /* color.blue */
    --color-blue-300: #dbeafe;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;
    --color-blue-500-a25: rgba(59, 130, 246, 0.25);

    /* color.green */
    --color-green-400: #4ade80; /* Success text and borders on a dark surface. */
    --color-green-500: #22c55e;
    --color-green-600: #15803d; /* Success text and borders on a light surface. */
    --color-green-700: #166534; /* The one green that holds white text at 4.5:1. */

    /* color.red */
    --color-red-500: #ef4444;
    --color-red-600: #dc2626;
    --color-red-700: #b91c1c;

    /* color.amber */
    --color-amber-500: #f59e0b;

    /* space */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-full: 999px;

    /* size */
    --size-border-width: 1px;
    --size-header-height: 56px;
    --size-max-content-width: 1024px;
    --size-tap-target: 44px; /* Smallest touch target the app allows. */

    /* font */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    /* fontWeight */
    --fontWeight-regular: 400;
    --fontWeight-semibold: 600;
    --fontWeight-bold: 700;

    /* duration */
    --duration-fast: 150ms;

    /* shadow */
    --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
    --shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.5), 0px 2px 4px -2px rgba(0, 0, 0, 0.5);

    /* breakpoint */
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;

    /* app.font-size */
    --app-font-size-xs: 0.75rem; /* The app uses this but never defined it. Matches its other 12px steps. */

    /* app.font-family */
    --app-font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; /* The app's font stack, with single quotes as it writes them. */

    /* app.shadow */
    --app-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5); /* The app uses this but never defined it. Matches its shadow scale. */

    /* === Semantic roles === */

    /* color.bg */
    --color-bg-page: var(--color-slate-900);
    --color-bg-surface: var(--color-slate-800);
    --color-bg-surface-hover: var(--color-slate-700);
    --color-bg-header: var(--color-accent-default);

    /* color.text */
    --color-text-primary: var(--color-slate-100);
    --color-text-muted: var(--color-slate-400);
    --color-text-light: var(--color-slate-500);
    --color-text-on-accent: var(--color-white); /* Words on a filled accent control. */
    --color-text-on-accent-strong: var(--color-slate-900); /* Words on a filled accent control in a light context. */
    --color-text-on-header: var(--color-white); /* Words in the blue top bar, at 16px or more and semibold. Large text o… */

    /* color.border */
    --color-border-default: var(--color-slate-700);

    /* color.accent */
    --color-accent-default: var(--color-blue-500);
    --color-accent-hover: var(--color-blue-600);
    --color-accent-soft: var(--color-blue-500-a25); /* Focus rings and tinted fills, never text. */
    --color-accent-strong: var(--color-blue-700); /* A filled accent action that carries white words at 4.5:1. */

    /* color.success */
    --color-success-default: var(--color-green-400); /* Success text, icons, and borders. Not a fill behind white text. */
    --color-success-strong: var(--color-green-700); /* A filled action (Start, Save). White words sit on it. */

    /* color.danger */
    --color-danger-default: var(--color-red-500);
    --color-danger-hover: var(--color-red-600);
    --color-danger-strong: var(--color-red-700); /* A filled destructive action that carries white text. */

    /* color.warning */
    --color-warning-default: var(--color-amber-500);

    /* text */
    --text-xs: 0.7rem;
    --text-sm: 0.875rem;
    --text-base: 16px;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.75rem;

    /* app.color */
    --app-color-bg: var(--color-bg-page); /* App name for color.bg.page. The app's legacy token. */
    --app-color-surface: var(--color-bg-surface);
    --app-color-surface-hover: var(--color-bg-surface-hover);
    --app-color-border: var(--color-border-default);
    --app-color-text: var(--color-text-primary);
    --app-color-text-muted: var(--color-text-muted);
    --app-color-text-light: var(--color-text-light);
    --app-color-primary: var(--color-accent-default);
    --app-color-primary-hover: var(--color-accent-hover);
    --app-color-primary-light: var(--color-accent-soft);
    --app-color-on-primary: var(--color-text-on-accent);
    --app-color-success: var(--color-success-default);
    --app-color-danger: var(--color-danger-default);
    --app-color-danger-hover: var(--color-danger-hover);
    --app-color-warning: var(--color-warning-default);
    --app-color-header-bg: var(--color-bg-header);

    /* app.space */
    --app-space-xs: var(--space-xs);
    --app-space-sm: var(--space-sm);
    --app-space-md: var(--space-md);
    --app-space-lg: var(--space-lg);
    --app-space-xl: var(--space-xl);

    /* app.font-size */
    --app-font-size-base: var(--text-base);
    --app-font-size-sm: var(--text-sm);
    --app-font-size-lg: var(--text-lg);
    --app-font-size-xl: var(--text-xl);
    --app-font-size-md: var(--text-base); /* The app uses this but never defined it. Declared here so its rules ke… */

    /* app.radius */
    --app-radius-md: var(--radius-md);
    --app-radius-sm: var(--radius-sm);

    /* app.size */
    --app-size-border-width: var(--size-border-width);
    --app-size-header-height: var(--size-header-height);
    --app-size-max-content-width: var(--size-max-content-width);

    /* app.transition */
    --app-transition-default: var(--duration-fast) cubic-bezier(0.25, 0.1, 0.25, 1) 0ms; /* 150ms ease. The cubicBezier is CSS 'ease'. */
}

/* Mode: light. Repeats each token that differs from dark. */
[data-theme="light"] {
    color-scheme: light;

    /* === Primitives === */

    /* shadow */
    --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    --shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);

    /* === Semantic roles === */

    /* color.bg */
    --color-bg-page: var(--color-slate-50);
    --color-bg-surface: var(--color-white);
    --color-bg-surface-hover: var(--color-slate-100);

    /* color.text */
    --color-text-primary: var(--color-slate-900);
    --color-text-muted: var(--color-slate-500);
    --color-text-light: var(--color-slate-400);

    /* color.border */
    --color-border-default: var(--color-slate-200);

    /* color.accent */
    --color-accent-soft: var(--color-blue-300);

    /* color.success */
    --color-success-default: var(--color-green-600);

    /* app.color */
    --app-color-bg: var(--color-bg-page);
    --app-color-surface: var(--color-bg-surface);
    --app-color-surface-hover: var(--color-bg-surface-hover);
    --app-color-border: var(--color-border-default);
    --app-color-text: var(--color-text-primary);
    --app-color-text-muted: var(--color-text-muted);
    --app-color-text-light: var(--color-text-light);
    --app-color-primary-light: var(--color-accent-soft);
    --app-color-success: var(--color-success-default);
}

/* Follow the operating system's light setting until a data-theme is set. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;

        /* === Primitives === */

        /* shadow */
        --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
        --shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);

        /* === Semantic roles === */

        /* color.bg */
        --color-bg-page: var(--color-slate-50);
        --color-bg-surface: var(--color-white);
        --color-bg-surface-hover: var(--color-slate-100);

        /* color.text */
        --color-text-primary: var(--color-slate-900);
        --color-text-muted: var(--color-slate-500);
        --color-text-light: var(--color-slate-400);

        /* color.border */
        --color-border-default: var(--color-slate-200);

        /* color.accent */
        --color-accent-soft: var(--color-blue-300);

        /* color.success */
        --color-success-default: var(--color-green-600);

        /* app.color */
        --app-color-bg: var(--color-bg-page);
        --app-color-surface: var(--color-bg-surface);
        --app-color-surface-hover: var(--color-bg-surface-hover);
        --app-color-border: var(--color-border-default);
        --app-color-text: var(--color-text-primary);
        --app-color-text-muted: var(--color-text-muted);
        --app-color-text-light: var(--color-text-light);
        --app-color-primary-light: var(--color-accent-soft);
        --app-color-success: var(--color-success-default);
    }
}