/* Portal — public-facing talent application surface.
   Built on Planetary Talent design tokens. Brand rules:
   - Pill buttons, soft radii, no drop shadows, no gradients.
   - Sentence case throughout. Phosphor icons only.
   - Moret reserved for hero/brand moments — DM Sans for everything else. */

/* ---------- Legacy aliases — let existing templates keep working
   while the new tokens take over. New code should reach for --pt-*. */
:root {
    /* Aliases consumed by the compiled Tailwind theme (see static/portal/js/tailwind.config.js). */
    --color-pure-white:        var(--pt-white);
    --color-deep-void:         var(--pt-deep-void);
    --color-rocket-flame:      var(--pt-rocket-flame);
    --color-galactic-seafoam:  var(--pt-galactic-seafoam);
    --color-solar-gold:        var(--pt-solar-gold);
    --color-cosmic-fog:        var(--pt-cosmic-fog);
    --color-lunar-dust:        var(--pt-lunar-dust);
    --color-steel-gray:        var(--pt-steel-gray);
    --color-graphite-core:     var(--pt-graphite-core);
    --color-retro-blush:       #fae2e0;
    --color-red-alert:         var(--pt-red-alert);
    --color-atmosphere-blue:   var(--pt-atmosphere-blue);

    --color-brand-primary:      var(--pt-rocket-flame);
    --color-brand-orange:       var(--pt-rocket-flame);
    --color-brand-orange-light: var(--pt-rocket-flame-20);
    --color-brand-teal:         var(--pt-galactic-seafoam);
    --color-brand-teal-light:   var(--pt-galactic-seafoam-20);
    --color-brand-blue:         var(--pt-atmosphere-blue);
    --color-brand-blue-light:   var(--pt-atmosphere-blue-20);
    --color-brand-black:        var(--pt-graphite-core);

    --background:           var(--pt-bg);
    --background-secondary: var(--pt-surface);
    --background-tertiary:  var(--pt-bg);

    /* Old HSL-format custom props kept so templates with
       hsl(var(--foreground)) keep rendering legible text. */
    --foreground: 220 4% 14%;            /* graphite core */
    --muted-foreground: 220 2% 46%;      /* steel gray */
    --muted: 0 0% 96.5%;
    --border: 0 0% 91%;
    --input: 0 0% 91%;
    --ring: 14 80% 57%;                  /* rocket flame */

    --primary: 14 80% 57%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 220 4% 14%;
    --accent: 162 45% 55%;
    --accent-foreground: 0 0% 100%;
    --destructive: 4 76% 53%;
    --destructive-foreground: 0 0% 98%;

    --radius: var(--pt-radius-md);
    --radius-pill: var(--pt-radius-pill);
}

* {
    border-color: var(--pt-border);
}

html {
    font-size: 16px;
}

body {
    background-color: var(--pt-bg);
    color: var(--pt-fg);
    font-family: var(--pt-font-body);
    margin: 0;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: var(--pt-leading-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pt-font-body);
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: var(--pt-leading-snug);
    color: var(--pt-fg);
    margin: 0;
}

/* Marketing display class — Moret for one focal moment per view. */
.pt-display {
    font-family: var(--pt-font-display);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: var(--pt-leading-tight);
    color: var(--pt-fg);
    margin: 0;
}

/* ---------- Markdown / prose ---------- */
.markdown-content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--pt-fg-muted);
}

.markdown-content p {
    margin-bottom: 1rem;
    font-size: 15px;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    color: var(--pt-fg);
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.markdown-content h1 { font-size: 24px; }
.markdown-content h2 { font-size: 20px; }
.markdown-content h3 { font-size: 18px; }
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 { font-size: 16px; }

.markdown-content ul,
.markdown-content ol {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.markdown-content ul { list-style-type: disc; }
.markdown-content ol { list-style-type: decimal; }

.markdown-content li {
    margin-bottom: 0.375rem;
    padding-left: 0.25rem;
}

.markdown-content li::marker { color: var(--pt-fg-muted); }

.markdown-content strong {
    color: var(--pt-fg);
    font-weight: 600;
}

.markdown-content a {
    color: var(--pt-rocket-flame);
    text-decoration: underline;
}

.markdown-content a:hover { opacity: 0.8; }

.markdown-content blockquote {
    border-left: 3px solid var(--pt-rocket-flame);
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
    color: var(--pt-fg-muted);
}

.markdown-content code {
    background: var(--pt-bg);
    padding: 0.125rem 0.375rem;
    border-radius: var(--pt-radius-xs);
    font-size: 0.875em;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.markdown-content pre {
    background: var(--pt-bg);
    padding: 1rem;
    border-radius: var(--pt-radius-md);
    overflow-x: auto;
    margin: 1rem 0;
}

.markdown-content pre code {
    background: none;
    padding: 0;
}

.markdown-content hr {
    border: none;
    border-top: 1px solid var(--pt-border);
    margin: 1.5rem 0;
}

.markdown-content > *:first-child { margin-top: 0; }
.markdown-content > *:last-child  { margin-bottom: 0; }

/* ---------- Buttons — pill, never square ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pt-space-2);
    white-space: nowrap;
    font-family: var(--pt-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition: background var(--pt-dur-instant) var(--pt-ease-paper),
                color var(--pt-dur-instant) var(--pt-ease-paper),
                border-color var(--pt-dur-instant) var(--pt-ease-paper),
                opacity var(--pt-dur-instant) var(--pt-ease-paper),
                transform var(--pt-dur-fast) var(--pt-ease-paper);
    cursor: pointer;
    outline: none;
    border-radius: var(--pt-radius-pill);
    height: 48px;
    padding: 0 var(--pt-space-4);
    border: none;
}

.btn:active   { transform: scale(0.97); }
.btn:disabled { pointer-events: none; opacity: 0.5; }

.btn svg {
    pointer-events: none;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.btn-primary {
    background: var(--pt-rocket-flame);
    color: var(--pt-white);
}
.btn-primary:hover { background: #d95428; }

.btn-outline {
    border: 1px solid var(--pt-rocket-flame);
    color: var(--pt-rocket-flame);
    background: transparent;
}
.btn-outline:hover {
    background: var(--pt-rocket-flame);
    color: var(--pt-white);
}

.btn-ghost { background: transparent; color: var(--pt-fg); }
.btn-ghost:hover { background: rgba(0, 0, 0, 0.05); }

.btn-sm   { height: 40px; padding: 0 var(--pt-space-3); font-size: 12px; }
.btn-full { width: 100%; }
.btn-lg   { height: 56px; padding: 0 var(--pt-space-4); font-size: 16px; }

/* ---------- Inputs — pill capsule by default. No drop shadows. ---------- */
.input {
    width: 100%;
    min-width: 0;
    height: 48px;
    border-radius: var(--pt-radius-pill);
    border: 1px solid var(--pt-border);
    background: var(--pt-surface);
    padding: 0 var(--pt-space-3);
    font-family: var(--pt-font-body);
    font-size: 16px;
    line-height: 1;
    color: var(--pt-fg);
    box-sizing: border-box;
    transition: border-color var(--pt-dur-instant) var(--pt-ease-paper);
    outline: none;
}

.input::placeholder { color: var(--pt-fg-muted); }

.input:focus-visible {
    border-color: var(--pt-fg);
}

.input:disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
}

@media (min-width: 768px) {
    .input { font-size: 14px; }
}

/* ---------- Select trigger ---------- */
.select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-radius: var(--pt-radius-md);
    border: 1px solid var(--pt-border);
    padding: var(--pt-space-2);
    font-size: 14px;
    background: var(--pt-surface);
    color: var(--pt-fg);
    cursor: pointer;
    outline: none;
    transition: border-color var(--pt-dur-instant) var(--pt-ease-paper);
}

.select-trigger:focus { border-color: var(--pt-fg); }

/* ---------- Mobile sheet overlay ---------- */
.sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.5);
}

.sheet-content {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: 100%;
    max-width: 380px;
    background: var(--pt-surface);
    border-left: 1px solid var(--pt-border);
    padding: var(--pt-space-4);
    transition: transform var(--pt-dur-base) var(--pt-ease-paper);
}

/* ---------- Slider ---------- */
.slider-track {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: var(--pt-radius-pill);
    background: var(--pt-border);
}

.slider-range {
    position: absolute;
    height: 100%;
    border-radius: var(--pt-radius-pill);
    background: var(--pt-rocket-flame);
}

.slider-thumb {
    width: 24px;
    height: 24px;
    border-radius: var(--pt-radius-pill);
    border: 2px solid var(--pt-rocket-flame);
    background: var(--pt-white);
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}