/* Refresh design tokens — PT brand vars + dark-mode overrides + fonts.
   Mirrors internal_ui/static/internal_ui/css/tokens.css (same --pt-* names). */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* Moret — display/serif face, self-hosted (same files as internal_ui). */
@font-face {
    font-family: "Moret";
    src: url("../fonts/Moret-Regular.1524c5425771.otf") format("opentype");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Moret";
    src: url("../fonts/Moret-Semibold.a88687d7178b.otf") format("opentype");
    font-weight: 600; font-style: normal; font-display: swap;
}

/* ===== Tokens ===== */
:root {
    --pt-font-display: "Moret", "Cormorant Garamond", Georgia, serif;
    /* Technical values only — IDs, invoice numbers, amounts, code. DM Mono has
       no 600/700; use 500 for emphasis. */
    --pt-font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --pt-white: #ffffff;
    --pt-cosmic-fog: #f7f3f2;
    --pt-lunar-dust: #e2dedd;
    --pt-crater-shadow: #4b4c51;
    --pt-steel-gray: #727779;
    --pt-polished-steel: #b5bbbf;
    --pt-graphite-core: #222326;
    --pt-deep-void: #121314;
    --pt-rocket-flame: #ed6033;
    --pt-galactic-seafoam: #5dc6ad;
    --pt-solar-gold: #ffae00;
    --pt-atmosphere-blue: #5da3c6;
    --pt-voyager-purple: #895dc6;
    --pt-red-alert: #e13d33;
    --pt-ink-on-flame-20: #b24321;
    --pt-ink-on-seafoam-20: #1f6e5d;
    --pt-ink-on-gold-20: #b06e00;
    --pt-ink-on-blue-20: #2f6680;
    --pt-ink-on-purple-20: #5b3b92;
    --pt-ink-on-red-20: #a2231c;
    --pt-rocket-flame-hover: #d95428;
    --pt-red-alert-hover: #c9352b;
    --pt-rocket-flame-20: rgba(237,96,51,0.2);
    --pt-galactic-seafoam-20: rgba(93,198,173,0.2);
    --pt-solar-gold-20: rgba(255,174,0,0.2);
    --pt-atmosphere-blue-20: rgba(93,163,198,0.2);
    --pt-voyager-purple-20: rgba(137,93,198,0.2);
    --pt-red-alert-20: rgba(225,61,51,0.2);

    --pt-bg: var(--pt-cosmic-fog);
    --pt-surface: var(--pt-white);
    --pt-border: var(--pt-lunar-dust);
    --pt-fg: var(--pt-graphite-core);
    --pt-fg-muted: var(--pt-steel-gray);
    --surface-muted: #f0eceb;
    --sidebar-w: 248px;
    /* Height of the bottom bars (sidebar footer + edit-page save bar) — shared so
       the two stay aligned along the bottom edge. */
    --bottom-bar-h: 65px;

    --pt-radius-xs: 4px;
    --pt-radius-sm: 8px;
    --pt-radius-md: 16px;
    --pt-radius-lg: 24px;
    --pt-radius-pill: 1000px;

    /* Spacing — 4px base grid (brand: spacing steps in 4s, no arbitrary values).
       Name = multiplier of 4. Micro-alignment below 4px stays raw (1–3px is
       optical nudging, not layout). */
    --pt-space-1: 4px;
    --pt-space-2: 8px;
    --pt-space-3: 12px;
    --pt-space-4: 16px;
    --pt-space-5: 20px;
    --pt-space-6: 24px;
    --pt-space-8: 32px;
    --pt-space-10: 40px;
    --pt-space-12: 48px;
    --pt-space-16: 64px;
    --pt-space-24: 96px;

    /* Type presets — brand scale, base 14. Size and leading are paired: set
       `font-size: var(--pt-text-sm); line-height: var(--pt-leading-sm);`
       together. Leadings are 4px multiples so text sits on the grid. */
    --pt-text-2xs: 11px;     --pt-leading-2xs: 16px;  /* eyebrows, micro-labels */
    --pt-text-xs: 12px;      --pt-leading-xs: 16px;   /* meta, table sublines */
    --pt-text-sm: 14px;      --pt-leading-sm: 20px;   /* body / UI default */
    --pt-text-md: 16px;      --pt-leading-md: 24px;   /* emphasized body, inputs */
    --pt-text-lg: 20px;      --pt-leading-lg: 28px;   /* section titles */
    --pt-text-xl: 24px;      --pt-leading-xl: 32px;   /* page titles */
    --pt-text-2xl: 32px;     --pt-leading-2xl: 40px;  /* hero titles */
    --pt-text-display: 44px; --pt-leading-display: 48px; /* Moret stat moments */

    /* Exits and small popovers sit between instant and base; without --pt-dur-fast
       every exit in the app hand-typed its own 150/180/200ms. */
    --pt-dur-instant: 80ms;
    --pt-dur-fast: 160ms;
    --pt-dur-base: 240ms;
    --pt-ease-paper: cubic-bezier(0.2, 0.7, 0.2, 1);
    /* iOS-like curve for edge-anchored panels (the columns drawer). */
    --pt-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

    --pt-focus-ring: 0 0 0 2px var(--pt-bg), 0 0 0 4px var(--pt-graphite-core);
    --pt-scrim: rgba(18, 19, 20, 0.55);
}
:root[data-theme="dark"] {
    --pt-bg: var(--pt-deep-void);
    --pt-surface: var(--pt-graphite-core);
    --pt-border: var(--pt-crater-shadow);
    --pt-fg: var(--pt-white);
    --pt-fg-muted: var(--pt-polished-steel);
    --surface-muted: #1a1b1e;
    --pt-focus-ring: 0 0 0 2px var(--pt-bg), 0 0 0 4px var(--pt-white);
    --pt-scrim: rgba(0, 0, 0, 0.65);
    /* On dark surfaces the "ink-on-*-20" tones (tuned for light tints) are too dark
       to read. Remap them to the full-strength brand color so every component that
       paints text/icons with these tokens — including inline-styled avatars, tags,
       and FK chips — stays legible without a per-component dark override. */
    --pt-ink-on-flame-20: var(--pt-rocket-flame);
    --pt-ink-on-seafoam-20: var(--pt-galactic-seafoam);
    --pt-ink-on-gold-20: var(--pt-solar-gold);
    --pt-ink-on-blue-20: var(--pt-atmosphere-blue);
    --pt-ink-on-purple-20: var(--pt-voyager-purple);
    --pt-ink-on-red-20: var(--pt-red-alert);
    color-scheme: dark;
}