/* =============================================================
   Pavlok Orchid UI — design tokens + semantic styles
   ============================================================= */

/* ─── BRAND FONT FAMILIES (self-hosted) ───────────────────────────
   Pavlok ships four typefaces:
     · Lato     — primary UI + body (full weights 100→900 + italics)
     · Inter UI — secondary UI sans (Inter v3 / "Inter UI" naming)
     · Bitter   — editorial serif (variable wght)
     · Plak     — Black Condensed display (headline-only, brand deck)
     · Outfit   — geometric UI alternate (variable wght)
   All loaded from /fonts/ as .ttf. */

@font-face { font-family: "Lato"; font-weight: 300; font-style: normal;
  src: url("/static/fonts/Lato-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal;
  src: url("/static/fonts/Lato-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-weight: 500; font-style: normal;
  src: url("/static/fonts/Lato-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-weight: 600; font-style: normal;
  src: url("/static/fonts/Lato-Semibold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal;
  src: url("/static/fonts/Lato-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-weight: 900; font-style: normal;
  src: url("/static/fonts/Lato-Black.ttf") format("truetype"); font-display: swap; }

/* Bitter — editorial serif, variable wght */
@font-face { font-family: "Bitter"; font-weight: 100 900; font-style: normal;
  src: url("/static/fonts/Bitter-VariableFont_wght.ttf") format("truetype-variations"); font-display: swap; }

/* Outfit — geometric sans, variable wght */
@font-face { font-family: "Outfit"; font-weight: 100 900; font-style: normal;
  src: url("/static/fonts/Outfit-VariableFont_wght.ttf") format("truetype-variations"); font-display: swap; }

/* Plak — display, condensed black only */
@font-face { font-family: "Plak"; font-weight: 900; font-style: normal; font-stretch: condensed;
  src: url("/static/fonts/Plak_LT_Black_Condensed.ttf") format("truetype"); font-display: swap; }

:root {
  /* ────────── COLOR — Brand ────────── */
  --pv-primary:        #8338EC;   /* orchid violet — primary brand */
  --pv-primary-dark:   #712BD3;   /* pressed / gradient end */
  --pv-primary-light:  #7F5BFF;   /* gradient highlight */
  --pv-primary-tint:   #F8F3FF;   /* surfaces */
  --pv-primary-08:     rgba(131, 56, 236, 0.08);  /* secondary btn bg */
  --pv-primary-14:     rgba(131, 56, 236, 0.14);  /* secondary btn hover */
  --pv-primary-glow:   #BDACFB;   /* signature button halo */

  --pv-accent:         #FFB706;   /* gold — second brand color */
  --pv-accent-dark:    #F1A60F;   /* pressed gold */
  --pv-accent-tint:    #FFF6E0;
  --pv-accent-glow:    rgba(255, 155, 6, 0.5);

  /* ────────── COLOR — Neutrals ────────── */
  --pv-ink:            #383E53;   /* primary text + dark logo */
  --pv-ink-2:          #202538;   /* deep ink (mascot, dark cards) */
  --pv-ink-3:          #111827;
  --pv-muted:          #9C9D9F;   /* secondary text, eyebrows */
  --pv-muted-2:        #C6B7D1;   /* tertiary, brand-deck strokes */
  --pv-divider:        #E9E9E9;   /* default 1px stroke */
  --pv-divider-2:      #F1F2F4;
  --pv-disabled:       #F3F4F6;
  --pv-surface:        #FFFFFF;
  --pv-bg:             #FCFBFF;   /* page bg, ~1% violet tint */
  --pv-bg-warm:        #F7F7F7;   /* brand-deck card fill */

  /* ────────── COLOR — Semantic ────────── */
  --pv-success:        #4AD993;
  --pv-error:          #FF5D5D;
  --pv-warning:        #FFB706;
  --pv-info:           #5DCCEF;

  /* ────────── TYPE ────────── */
  /* Primary UI + body — Lato. Inter UI is a near-equivalent secondary. */
  --pv-font:           "Lato", "Inter UI", -apple-system,
                       BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Editorial serif — Bitter (used for long-form copy, quotes, brand-deck pull text). */
  --pv-font-serif:     "Bitter", Georgia, "Times New Roman", serif;
  /* Display — Plak Black Condensed. Headlines only, ALL CAPS or large display. */
  --pv-font-display:   "Plak", "Lato", sans-serif;
  /* Geometric alternate — Outfit. Use for numerals, ticker stats, and cover slides. */
  --pv-font-alt:       "Outfit", "Lato", sans-serif;
  --pv-font-mono:      "JetBrains Mono", ui-monospace, "SF Mono", Menlo,
                       Consolas, monospace;

  /* Display + headings (brand-deck scale) */
  --pv-fs-display-xl:  56px;   --pv-lh-display-xl:  1.5;
  --pv-fs-display-lg:  40px;   --pv-lh-display-lg:  1;
  --pv-fs-h1:          32px;   --pv-lh-h1:          1.25;
  --pv-fs-h2:          28px;   --pv-lh-h2:          1.3;
  --pv-fs-h3:          24px;   --pv-lh-h3:          1.33;
  --pv-fs-h4:          20px;   --pv-lh-h4:          1.4;

  /* Body */
  --pv-fs-body-lg:     16px;   --pv-lh-body-lg:     24px;
  --pv-fs-body:        14px;   --pv-lh-body:        20px;
  --pv-fs-caption:     12px;   --pv-lh-caption:     16px;
  --pv-fs-tiny:        10px;   --pv-lh-tiny:        14px;

  /* Lato has slightly looser default tracking than General Sans — pull display tighter */
  --pv-tracking-display: -0.018em;
  --pv-tracking-body:    -0.003em;
  --pv-tracking-eyebrow:  0.22em;
  --pv-tracking-plak:    -0.01em;   /* Plak is already condensed */

  --pv-fw-regular:  400;
  --pv-fw-medium:   500;
  --pv-fw-semibold: 600;
  --pv-fw-bold:     700;

  /* ────────── SPACING (4px grid) ────────── */
  --pv-sp-1: 4px;
  --pv-sp-2: 8px;
  --pv-sp-3: 12px;
  --pv-sp-4: 16px;
  --pv-sp-5: 20px;
  --pv-sp-6: 24px;
  --pv-sp-8: 32px;
  --pv-sp-10: 40px;
  --pv-sp-12: 48px;
  --pv-sp-16: 64px;
  --pv-sp-20: 80px;

  /* ────────── RADII ────────── */
  --pv-r-sm:  8px;
  --pv-r-md:  12px;
  --pv-r-lg:  16px;     /* signature radius — buttons / inputs / cards */
  --pv-r-xl:  24px;     /* hero surfaces */
  --pv-r-pill: 999px;

  /* ────────── ELEVATION ────────── */
  --pv-shadow-card:    0 1px 3px rgba(166, 175, 195, 0.4);
  --pv-shadow-float:   0 4px 12px rgba(13, 10, 44, 0.08);
  --pv-shadow-modal:   0 10px 40px rgba(92, 115, 160, 0.18);

  /* signature primary-button halo */
  --pv-shadow-button:  0 8px 20px var(--pv-primary-glow);

  /* skeuomorphic inset combo (apply to primary buttons + display type) */
  --pv-inset-skeu:     inset 3px 1px 15px rgba(255, 255, 255, 0.5),
                       inset 0 -3px 10px rgba(0, 0, 0, 0.37);
  --pv-inset-pressed:  inset 0 6px 6px -1px rgba(0, 0, 0, 0.15),
                       0 1px 2px -1px rgba(17, 12, 34, 0.08);

  /* focus + error glows */
  --pv-glow-focus:     0 0 0 4px rgba(131, 56, 236, 0.18);
  --pv-glow-error:     0 1px 11px rgba(255, 93, 93, 0.15);

  /* ────────── MOTION ────────── */
  --pv-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --pv-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --pv-dur-fast:    120ms;
  --pv-dur-base:    200ms;
  --pv-dur-slow:    320ms;
}

/* =============================================================
   SEMANTIC ELEMENT STYLES — drop the stylesheet in & h1/p/etc work
   ============================================================= */

html { font-family: var(--pv-font); color: var(--pv-ink); }

body {
  margin: 0;
  background: var(--pv-bg);
  font-size: var(--pv-fs-body-lg);
  line-height: var(--pv-lh-body-lg);
  letter-spacing: var(--pv-tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--pv-ink); margin: 0; font-weight: var(--pv-fw-bold);
                 letter-spacing: var(--pv-tracking-display); }
h1 { font-size: var(--pv-fs-display-xl); line-height: var(--pv-lh-display-xl); }
h2 { font-size: var(--pv-fs-display-lg); line-height: var(--pv-lh-display-lg); }
h3 { font-size: var(--pv-fs-h1);         line-height: var(--pv-lh-h1); }
h4 { font-size: var(--pv-fs-h3);         line-height: var(--pv-lh-h3); font-weight: var(--pv-fw-semibold); }

p  { margin: 0; color: var(--pv-ink); font-size: var(--pv-fs-body-lg); line-height: var(--pv-lh-body-lg); }

small, .pv-caption { font-size: var(--pv-fs-caption); line-height: var(--pv-lh-caption); color: var(--pv-muted); }

a  { color: var(--pv-primary); text-decoration: none; }
a:hover { color: var(--pv-primary-dark); }

code, pre, kbd, samp { font-family: var(--pv-font-mono); }

::selection { background: var(--pv-primary-tint); color: var(--pv-primary-dark); }

/* eyebrow / wide-tracking label */
.pv-eyebrow {
  font-weight: var(--pv-fw-medium);
  font-size: 14px;
  letter-spacing: var(--pv-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pv-ink);
}

/* numbered eyebrow — '01  Colors' */
.pv-section-num {
  display: inline-flex; gap: 12px; align-items: baseline;
  font-weight: var(--pv-fw-medium); font-size: 24px; line-height: 32px;
}
.pv-section-num::before {
  content: attr(data-num); color: var(--pv-muted);
}

/* ─── Components — use these classes on plain HTML for fast prototyping ─── */
.pv-btn {
  font-family: var(--pv-font);
  font-weight: var(--pv-fw-bold); font-size: 16px; line-height: 24px;
  height: 56px; padding: 0 24px; border: 0; border-radius: var(--pv-r-lg);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; transition: transform var(--pv-dur-fast) var(--pv-ease-out),
                               box-shadow var(--pv-dur-base) var(--pv-ease-out),
                               background var(--pv-dur-base) var(--pv-ease-out);
}
.pv-btn--primary {
  color: #fff;
  background: linear-gradient(180deg, var(--pv-primary) 0%, var(--pv-primary-light) 100%);
  box-shadow: var(--pv-shadow-button), var(--pv-inset-skeu);
}
.pv-btn--primary:hover { background: linear-gradient(180deg, var(--pv-primary-dark) 0%, var(--pv-primary) 100%); }
.pv-btn--primary:active { transform: scale(0.98); }
.pv-btn--secondary {
  color: var(--pv-primary-dark);
  background: var(--pv-primary-08);
}
.pv-btn--secondary:hover { background: var(--pv-primary-14); }
.pv-btn--ghost {
  color: var(--pv-primary-dark); background: transparent;
}
.pv-btn--sm { height: 48px; font-size: 14px; padding: 0 20px; }
.pv-btn[disabled], .pv-btn--disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.pv-input {
  font-family: var(--pv-font); font-size: 16px; line-height: 24px;
  height: 56px; padding: 16px 24px; width: 100%;
  border: 1px solid var(--pv-divider); border-radius: var(--pv-r-lg);
  background: var(--pv-surface); color: var(--pv-ink);
  transition: border-color var(--pv-dur-base) var(--pv-ease-out),
              box-shadow var(--pv-dur-base) var(--pv-ease-out);
  outline: none;
}
.pv-input::placeholder { color: var(--pv-muted); }
.pv-input:focus { border-color: var(--pv-primary); box-shadow: var(--pv-glow-focus); }
.pv-input--error { border-color: var(--pv-error); box-shadow: var(--pv-glow-error); }

.pv-card {
  background: var(--pv-surface);
  border-radius: var(--pv-r-lg);
  box-shadow: var(--pv-shadow-card);
  padding: var(--pv-sp-6);
}
.pv-card--float { box-shadow: var(--pv-shadow-float); }

.pv-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--pv-r-pill);
  background: var(--pv-primary-08); color: var(--pv-primary-dark);
  font-size: 14px; font-weight: var(--pv-fw-medium); line-height: 18px;
}

.pv-divider { height: 1px; background: var(--pv-divider); border: 0; }