/* Planetary Talent — design tokens (colors, type, spacing, radii)
   Mirror of internal_ui/css/tokens.css with paths rewritten for portal
   static layout. Source of truth for the brand. */

/* ---------- 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 {
    --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-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);
    --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);

    --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;

    --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;

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

    --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);

    --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);
}

.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); }