/* Planetary Talent — design tokens (colors, type, spacing, radii)
   Source of truth for the brand. Mirrors the canonical design-system
   colors_and_type.css from the brand team. Do not introduce ad-hoc
   hex values, shadows, or gradients in downstream stylesheets. */

/* ---------- Fonts (self-hosted) ---------- */
@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;
}
@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans-Variable.30bbfaf1881a.ttf") format("truetype-variations");
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans-Italic-Variable.01b16af808a5.ttf") format("truetype-variations");
    font-weight: 100 1000;
    font-style: italic;
    font-display: swap;
}

:root {
    /* ---------- Core palette ---------- */
    --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;

    /* ---------- Tint inks (paired only with their 20% bg) ---------- */
    --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;

    /* ---------- 20% tint backgrounds ---------- */
    --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);

    /* ---------- Semantic — light mode (default) ---------- */
    --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);
    --pt-accent:       var(--pt-rocket-flame);
    --pt-success:      var(--pt-galactic-seafoam);
    --pt-warning:      var(--pt-solar-gold);
    --pt-info:         var(--pt-atmosphere-blue);
    --pt-danger:       var(--pt-red-alert);

    /* ---------- Typography ---------- */
    --pt-font-display: "Moret", "Cormorant Garamond", Georgia, serif;
    --pt-font-body:    "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

    --pt-text-xs:   12px;
    --pt-text-sm:   12px;
    --pt-text-base: 16px;
    --pt-text-md:   16px;
    --pt-text-lg:   20px;
    --pt-text-xl:   24px;
    --pt-text-2xl:  32px;
    --pt-text-3xl:  40px;
    --pt-text-4xl:  56px;
    --pt-text-5xl:  72px;
    --pt-text-6xl:  96px;

    --pt-leading-tight: 1.05;
    --pt-leading-snug:  1.2;
    --pt-leading-body:  1.5;

    /* ---------- 8-pt spacing system (4 reserved for tight details) ---------- */
    --pt-space-1:  4px;
    --pt-space-2:  8px;
    --pt-space-3:  16px;
    --pt-space-4:  24px;
    --pt-space-5:  32px;
    --pt-space-6:  48px;
    --pt-space-7:  64px;
    --pt-space-8:  96px;
    --pt-space-9:  128px;

    /* ---------- Radii — soft, never square ---------- */
    --pt-radius-xs:   4px;
    --pt-radius-sm:   8px;
    --pt-radius-md:   16px;
    --pt-radius-lg:   24px;
    --pt-radius-xl:   32px;
    --pt-radius-pill: 1000px;

    /* ---------- Borders (hairlines; flat, no shadows) ---------- */
    --pt-border-hairline: 1px solid var(--pt-border);
    --pt-border-strong:   1.5px solid var(--pt-fg);

    /* ---------- Motion ---------- */
    --pt-dur-instant:    80ms;
    --pt-dur-fast:       160ms;
    --pt-dur-base:       240ms;
    --pt-dur-slow:       400ms;
    --pt-dur-deliberate: 640ms;

    --pt-ease-paper:      cubic-bezier(0.2, 0.7, 0.2, 1);
    --pt-ease-typewriter: cubic-bezier(0.6, 0.0, 0.4, 1);
    --pt-ease-push:       cubic-bezier(0.8, 0.0, 0.2, 1);
    --pt-ease-settle:     cubic-bezier(0.4, 0.0, 0.2, 1);

    /* ---------- Focus rings (no glow) ---------- */
    --pt-focus-ring:        0 0 0 2px var(--pt-bg), 0 0 0 4px var(--pt-graphite-core);
    --pt-focus-ring-accent: 0 0 0 2px var(--pt-bg), 0 0 0 4px var(--pt-rocket-flame);
}

/* ---------- Dark mode ---------- */
:root[data-theme="dark"],
.pt-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);
}

html[data-theme="dark"] {
    color-scheme: dark;
}

/* ---------- Tint pairs — paired bg + ink, the ONLY way to deploy
   the darkened "ink" hues. Drop `.pt-tint-*` on a span/div and any
   nested text inherits legible contrast. */
.pt-tint-flame   { background: var(--pt-rocket-flame-20);     color: var(--pt-ink-on-flame-20); }
.pt-tint-seafoam { background: var(--pt-galactic-seafoam-20); color: var(--pt-ink-on-seafoam-20); }
.pt-tint-gold    { background: var(--pt-solar-gold-20);       color: var(--pt-ink-on-gold-20); }
.pt-tint-blue    { background: var(--pt-atmosphere-blue-20);  color: var(--pt-ink-on-blue-20); }
.pt-tint-purple  { background: var(--pt-voyager-purple-20);   color: var(--pt-ink-on-purple-20); }
.pt-tint-red     { background: var(--pt-red-alert-20);        color: var(--pt-ink-on-red-20); }

[data-theme="dark"] .pt-tint-flame,
.pt-dark .pt-tint-flame   { color: var(--pt-rocket-flame); }
[data-theme="dark"] .pt-tint-seafoam,
.pt-dark .pt-tint-seafoam { color: var(--pt-galactic-seafoam); }
[data-theme="dark"] .pt-tint-gold,
.pt-dark .pt-tint-gold    { color: var(--pt-solar-gold); }
[data-theme="dark"] .pt-tint-blue,
.pt-dark .pt-tint-blue    { color: var(--pt-atmosphere-blue); }
[data-theme="dark"] .pt-tint-purple,
.pt-dark .pt-tint-purple  { color: var(--pt-voyager-purple); }
[data-theme="dark"] .pt-tint-red,
.pt-dark .pt-tint-red     { color: var(--pt-red-alert); }