/* ToolZeroo Resume — design tokens and primitives (v2, "Paper & Cobalt").
   One brand with toolzeroo.com (Inter, cobalt blue, warm canvas), a notch more premium:
   Fraunces for display type, layered shadows, a glass top bar, gold for Pro. Light and dark. */
:root{
  color-scheme:light;
  /* surfaces */
  --canvas:#F8F7F3; --canvas-2:#F1EFE9; --surface:#FFFFFF; --surface-2:#FBFAF8; --desk:#ECE9E1; --overlay:rgb(20 23 27 / .48);
  /* ink */
  --ink:#15171B; --ink-2:#474A52; --muted:#6B6E76; --faint:#9A9DA4;
  /* brand */
  --accent:#2E5BFF; --accent-deep:#1B3FCC; --accent-text:#1E45D6; --accent-ink:#FFFFFF; --accent-soft:#EBF0FF; --accent-glow:rgb(46 91 255 / .18);
  /* semantic */
  --success:#177A4B; --success-soft:#E4F4EA; --warning:#9A6211; --warning-soft:#FBF1DB; --danger:#B42318; --danger-soft:#FBE9E7;
  /* pro */
  --pro:#15171B; --pro-ink:#F3D27A; --gold:#B8892E; --gold-soft:#FBF3DF;
  /* lines */
  --line:#E4E1D9; --line-2:#D5D1C6; --border-input:#8B8A84;
  /* radii */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  /* elevation */
  --shadow-1:0 1px 2px rgb(20 23 27 / .05), 0 2px 8px rgb(20 23 27 / .04);
  --shadow-2:0 1px 2px rgb(20 23 27 / .07), 0 14px 36px -10px rgb(20 23 27 / .18);
  --shadow-3:0 2px 6px rgb(20 23 27 / .08), 0 32px 80px -24px rgb(20 23 27 / .35);
  --shadow-sheet:0 1px 1px rgb(20 23 27 / .06), 0 8px 24px -8px rgb(20 23 27 / .18), 0 40px 80px -30px rgb(20 23 27 / .32);
  --ring:0 0 0 2px var(--canvas), 0 0 0 4px var(--accent);
  /* type */
  --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-mono:"IBM Plex Mono",Menlo,Consolas,monospace;
  --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem; --fs-16:1rem; --fs-18:1.125rem; --fs-20:1.25rem; --fs-24:1.5rem; --fs-30:1.875rem; --fs-38:2.375rem; --fs-48:3rem; --fs-60:3.75rem;
  /* spacing */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --max:1200px; --gutter:clamp(16px,4vw,48px);
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:140ms; --t-med:240ms;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  color-scheme:dark;
  --canvas:#111316; --canvas-2:#0C0E11; --surface:#1A1D22; --surface-2:#1F2329; --desk:#0A0B0D; --overlay:rgb(0 0 0 / .6);
  --ink:#F1EFEA; --ink-2:#BEBBB3; --muted:#9A9890; --faint:#6F6E69;
  --accent:#7C9BFF; --accent-deep:#5B7EF5; --accent-text:#8FA9FF; --accent-ink:#0B1020; --accent-soft:#1C2540; --accent-glow:rgb(124 155 255 / .22);
  --success:#4ADE80; --success-soft:#14301F; --warning:#FBBF24; --warning-soft:#332A10; --danger:#F87171; --danger-soft:#3A1A1A;
  --pro:#F3D27A; --pro-ink:#15171B; --gold:#E2BE63; --gold-soft:#2E2712;
  --line:#2A2E35; --line-2:#363B44; --border-input:#6E737C;
  --shadow-1:none; --shadow-2:0 0 0 1px rgb(255 255 255 / .04); --shadow-3:0 24px 60px -20px rgb(0 0 0 / .6);
  --shadow-sheet:0 0 0 1px rgb(255 255 255 / .06), 0 40px 80px -30px rgb(0 0 0 / .7);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#111316; --canvas-2:#0C0E11; --surface:#1A1D22; --surface-2:#1F2329; --desk:#0A0B0D; --overlay:rgb(0 0 0 / .6);
  --ink:#F1EFEA; --ink-2:#BEBBB3; --muted:#9A9890; --faint:#6F6E69;
  --accent:#7C9BFF; --accent-deep:#5B7EF5; --accent-text:#8FA9FF; --accent-ink:#0B1020; --accent-soft:#1C2540; --accent-glow:rgb(124 155 255 / .22);
  --success:#4ADE80; --success-soft:#14301F; --warning:#FBBF24; --warning-soft:#332A10; --danger:#F87171; --danger-soft:#3A1A1A;
  --pro:#F3D27A; --pro-ink:#15171B; --gold:#E2BE63; --gold-soft:#2E2712;
  --line:#2A2E35; --line-2:#363B44; --border-input:#6E737C;
  --shadow-1:none; --shadow-2:0 0 0 1px rgb(255 255 255 / .04); --shadow-3:0 24px 60px -20px rgb(0 0 0 / .6);
  --shadow-sheet:0 0 0 1px rgb(255 255 255 / .06), 0 40px 80px -30px rgb(0 0 0 / .7);
}

/* ---- reset & base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-ui);font-size:var(--fs-16);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;line-height:1.12;letter-spacing:-.015em;text-wrap:balance;font-weight:700}
p{margin:0}
a{color:var(--accent-text);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
input,textarea,select{font:inherit;color:inherit}
img,svg{max-width:100%;display:block}
[hidden]{display:none !important}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-xs)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-48px;background:var(--ink);color:var(--canvas);padding:10px 14px;border-radius:var(--r-sm);z-index:100;font-weight:600}
.skip-link:focus{top:12px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}}

/* ---- typography helpers ---- */
.display{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;font-variation-settings:"opsz" 144,"SOFT" 40}
.display em{font-style:italic;font-weight:500;color:var(--accent-text)}
.eyebrow{font-size:var(--fs-12);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lead{font-size:var(--fs-18);color:var(--ink-2);max-width:60ch;text-wrap:pretty}
.small{font-size:var(--fs-14)}
.fine{font-size:var(--fs-13);color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:var(--fs-14);text-decoration:none;white-space:nowrap;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease),border-color var(--t-fast)}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.sm{min-height:36px;padding:0 14px;font-size:var(--fs-13)}
.btn.lg{min-height:52px;padding:0 26px;font-size:var(--fs-16)}
.btn.block{width:100%}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),0 1px 2px rgb(20 23 27 / .18),0 8px 20px -10px var(--accent-glow)}
.btn-primary:hover{background:var(--accent-deep);box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),0 2px 6px rgb(20 23 27 / .18),0 12px 28px -10px var(--accent-glow)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line-2);box-shadow:var(--shadow-1)}
.btn-secondary:hover{border-color:var(--border-input)}
.btn-ghost{color:var(--ink-2);background:transparent}
.btn-ghost:hover{background:var(--accent-soft);color:var(--accent-text)}
.btn-danger{color:var(--danger);border-color:var(--danger);background:transparent}
.btn-danger:hover{background:var(--danger-soft)}
.btn-pro{background:var(--pro);color:var(--pro-ink);box-shadow:inset 0 1px 0 rgb(255 255 255 / .1),0 1px 2px rgb(20 23 27 / .2)}
.btn-pro:hover{filter:brightness(1.08)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm);color:var(--ink-2);transition:background var(--t-fast)}
.icon-btn:hover{background:var(--accent-soft);color:var(--accent-text)}
.icon-btn.lg{width:44px;height:44px}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- badges & chips ---- */
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;white-space:nowrap}
.badge-free{border:1px solid var(--line-2);color:var(--ink-2);background:var(--surface)}
.badge-pro{background:var(--pro);color:var(--pro-ink)}
.badge-pro::before{content:"★";font-size:10px;transform:translateY(-.5px)}
.badge-new{background:var(--accent-soft);color:var(--accent-text)}
.chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:var(--fs-13);font-weight:500;color:var(--ink-2);white-space:nowrap;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.chip:hover{border-color:var(--line-2);color:var(--ink);text-decoration:none}
.chip.is-on,.chip[aria-pressed="true"],.chip[aria-selected="true"]{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 18%,transparent)}
.chip .dot.saving{background:var(--warning);box-shadow:0 0 0 3px color-mix(in srgb,var(--warning) 18%,transparent)}

/* ---- fields ---- */
.field{display:grid;gap:6px;min-width:0}
.field>label,.field>.label{font-size:var(--fs-13);font-weight:600;color:var(--ink)}
.field .hint{font-size:var(--fs-12);color:var(--muted);line-height:1.45}
.field input,.field textarea,.field select{width:100%;min-height:44px;padding:10px 13px;border-radius:var(--r-sm);border:1px solid var(--border-input);background:var(--surface);color:var(--ink);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:hover,.field textarea:hover{border-color:var(--ink-2)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);outline:none}
.field textarea{min-height:104px;resize:vertical;line-height:1.5}
.field .example{font-size:var(--fs-12);color:var(--accent-text);font-weight:500;justify-self:start}
.field.has-error input,.field.has-error textarea{border-color:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 18%,transparent)}
.field .error{font-size:var(--fs-12);color:var(--danger);font-weight:500}
.field .counter{font-size:var(--fs-12);color:var(--muted);justify-self:end}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.g2{grid-template-columns:1fr}}
.check{display:flex;align-items:center;gap:10px;font-size:var(--fs-14);min-height:44px}
.check input{width:20px;height:20px;accent-color:var(--accent);margin:0}

/* ---- cards & surfaces ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1)}
.card.raised{box-shadow:var(--shadow-2)}
.tip{display:flex;gap:12px;padding:12px 14px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--ink);font-size:var(--fs-13);line-height:1.5;align-items:flex-start}
.tip b{color:var(--accent-text)}
.tip .tip-icon{flex:none;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:12px;font-weight:700}
.empty{border:1.5px dashed var(--line-2);border-radius:var(--r-md);padding:22px;display:grid;gap:8px;justify-items:start;background:transparent}
.empty b{font-size:var(--fs-16)}
.empty p{font-size:var(--fs-14);color:var(--muted);max-width:52ch}

/* ---- toast, dialog, sheet ---- */
.toast-host{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:80;display:grid;gap:8px;justify-items:center;pointer-events:none;width:min(92vw,520px)}
.toast{pointer-events:auto;display:inline-flex;align-items:center;gap:14px;padding:12px 16px;border-radius:999px;background:var(--ink);color:var(--canvas);font-size:var(--fs-14);font-weight:500;box-shadow:var(--shadow-3);animation:toast-in var(--t-med) var(--ease)}
.toast button{color:var(--pro-ink);font-weight:700;padding:4px 2px;min-height:32px}
.toast.success{background:var(--success);color:#fff}
.toast.success button{color:#fff}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dialog{border:0;padding:0;background:transparent;max-width:min(92vw,460px);width:100%}
.dialog::backdrop{background:var(--overlay);backdrop-filter:blur(2px)}
.dialog-box{background:var(--surface);color:var(--ink);border-radius:var(--r-lg);padding:24px;display:grid;gap:14px;box-shadow:var(--shadow-3);border:1px solid var(--line)}
.dialog-box h2{font-size:var(--fs-20)}
.dialog-box p{color:var(--ink-2);font-size:var(--fs-14)}
.dialog-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}
.sheet{border:0;padding:0;background:transparent;max-width:min(96vw,560px);width:100%}
.sheet::backdrop{background:var(--overlay);backdrop-filter:blur(2px)}
.sheet-box{background:var(--surface);color:var(--ink);border-radius:var(--r-lg);padding:22px 24px 24px;display:grid;gap:14px;box-shadow:var(--shadow-3);border:1px solid var(--line);max-height:88vh;overflow:auto}
.sheet-box h2{font-size:var(--fs-20)}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
@media (max-width:640px){
  .sheet{max-width:100vw;margin:auto 0 0 0}
  .sheet-box{border-radius:var(--r-lg) var(--r-lg) 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .sheet-box::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line-2);margin:-8px auto 4px}
}
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.opt b{font-size:var(--fs-14);font-weight:600;display:block}
.opt span{font-size:var(--fs-12);color:var(--muted)}
.opt .btn{flex:none}

/* ---- progress ring ---- */
.ring{--p:0;width:48px;height:48px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--line) 0);display:grid;place-items:center;transition:background var(--t-med)}
.ring>span{width:38px;height:38px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---- real CV thumbnails: a real .cv scaled to fit its box ---- */
.thumb{position:relative;aspect-ratio:210/297;width:100%;overflow:hidden;border-radius:3px;background:#fff;box-shadow:var(--shadow-sheet)}
.thumb .cv{position:absolute;left:0;top:0;transform-origin:0 0;min-height:297mm;pointer-events:none}
.thumb.letter{aspect-ratio:215.9/279.4}

/* ---- CV sheet frame (screen) ---- */
.sheet-frame{background:var(--desk);border-radius:var(--r-lg);padding:clamp(12px,3vw,32px);overflow:hidden;position:relative}
.sheet-frame .cv{box-shadow:var(--shadow-sheet);border-radius:2px}
.pro-ribbon{position:absolute;top:14px;right:-34px;transform:rotate(38deg);background:var(--pro);color:var(--pro-ink);font-size:10px;font-weight:800;letter-spacing:.1em;padding:4px 40px;text-transform:uppercase;pointer-events:none;box-shadow:0 2px 6px rgb(0 0 0 / .2)}