/* ============================================================
   Kyvee — Design System (translated from Relume globals.css)
   Fonts, tokens, color schemes, component primitives.
   ============================================================ */

/* ---------- Fonts (local woff2) ---------- */
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family:"Roboto"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/roboto-400.woff2") format("woff2"); }
@font-face { font-family:"Roboto"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/roboto-500.woff2") format("woff2"); }
@font-face { font-family:"Roboto"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/roboto-700.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root{
  /* Force the light theme everywhere — ignore the OS/browser dark preference
     so form controls, scrollbars and the UA canvas all render light. */
  color-scheme: light;
  /* neutral */
  --color-white:#ffffff;
  --color-neutral-lightest:#f2f2f2;
  --color-neutral-lighter:#d9d9da;
  --color-neutral-light:#b4b3b6;
  --color-neutral:#828086;
  --color-neutral-dark:#504d55;
  --color-neutral-darker:#1e1b25;
  --color-neutral-darkest:#06020d;
  /* science blue (primary chromatic) */
  --color-science-blue-lightest:#e5eff9;
  --color-science-blue-lighter:#cce0f4;
  --color-science-blue-light:#4c93db;
  --color-science-blue:#0066cc;
  --color-science-blue-dark:#0051a3;
  --color-science-blue-darker:#002851;
  --color-science-blue-darkest:#001e3d;
  /* jade / yellow-sea / electric-violet (full palette, design-system completeness) */
  --color-jade-lightest:#e5f7f1; --color-jade-lighter:#ccefe4; --color-jade-light:#4cc9a1; --color-jade:#00b27a; --color-jade-dark:#008e61; --color-jade-darker:#004730; --color-jade-darkest:#003524;
  --color-yellow-sea-lightest:#fff7e5; --color-yellow-sea-lighter:#ffefcc; --color-yellow-sea-light:#ffc74c; --color-yellow-sea:#ffb000; --color-yellow-sea-dark:#cc8c00; --color-yellow-sea-darker:#664600; --color-yellow-sea-darkest:#4c3400;
  --color-electric-violet-lightest:#f1e9ff; --color-electric-violet-lighter:#e4d4ff; --color-electric-violet-light:#a16aff; --color-electric-violet:#7a2bff; --color-electric-violet-dark:#6122cc; --color-electric-violet-darker:#301166; --color-electric-violet-darkest:#240c4c;
  /* transparency helpers */
  --color-white-10:color-mix(in srgb,var(--color-white),transparent 90%);
  --color-white-15:color-mix(in srgb,var(--color-white),transparent 85%);
  --color-white-20:color-mix(in srgb,var(--color-white),transparent 80%);
  --color-white-60:color-mix(in srgb,var(--color-white),transparent 40%);
  --color-dark-5:color-mix(in srgb,var(--color-neutral-darkest),transparent 95%);
  --color-dark-10:color-mix(in srgb,var(--color-neutral-darkest),transparent 90%);
  --color-dark-15:color-mix(in srgb,var(--color-neutral-darkest),transparent 85%);
  --color-dark-50:color-mix(in srgb,var(--color-neutral-darkest),transparent 50%);
  --color-dark-60:color-mix(in srgb,var(--color-neutral-darkest),transparent 40%);

  /* type scale (mobile defaults) */
  --text-h1:2.75rem; --text-h2:2.5rem; --text-h3:2rem; --text-h4:1.5rem; --text-h5:1.25rem; --text-h6:1.125rem;
  --text-large:1.125rem; --text-medium:1rem; --text-regular:.875rem; --text-small:.75rem; --text-tiny:.625rem;

  /* radii */
  --radius-button:.375rem; --radius-card:.5rem; --radius-badge:.375rem; --radius-image:.5rem; --radius-form:.375rem;

  /* layout */
  --container:80rem; --max-lg:48rem; --max-md:35rem; --max-xs:25rem;

  /* default scheme tokens (overridden by .scheme-* ) */
  --scheme-bg:var(--color-white);
  --scheme-fg:var(--color-white);
  --scheme-text:var(--color-neutral-darkest);
  --scheme-border:var(--color-dark-15);
}
@media (min-width:992px){
  :root{
    --text-h1:4.5rem; --text-h2:3.25rem; --text-h3:2.75rem; --text-h4:2.25rem; --text-h5:1.75rem; --text-h6:1.375rem;
    --text-large:1.375rem; --text-medium:1.125rem; --text-regular:1rem; --text-small:.875rem; --text-tiny:.75rem;
  }
}

/* ---------- Color schemes ---------- */
.scheme-1{ --scheme-bg:var(--color-white);                 --scheme-fg:var(--color-white);                 --scheme-text:var(--color-neutral-darkest); --scheme-border:var(--color-dark-15);  background:var(--scheme-bg); color:var(--scheme-text); }
.scheme-2{ --scheme-bg:var(--color-neutral-darker);         --scheme-fg:var(--color-neutral-darker);         --scheme-text:var(--color-white);           --scheme-border:var(--color-white-20); background:var(--scheme-bg); color:var(--scheme-text); }
.scheme-3{ --scheme-bg:var(--color-science-blue-lightest);  --scheme-fg:var(--color-science-blue-lightest);  --scheme-text:var(--color-neutral-darkest); --scheme-border:var(--color-dark-15);  background:var(--scheme-bg); color:var(--scheme-text); }
.scheme-4{ --scheme-bg:var(--color-neutral-darkest);        --scheme-fg:var(--color-neutral-darkest);        --scheme-text:var(--color-white);           --scheme-border:var(--color-white-20); background:var(--scheme-bg); color:var(--scheme-text); }
.scheme-5{ --scheme-bg:var(--color-science-blue-lighter);   --scheme-fg:var(--color-science-blue-lighter);   --scheme-text:var(--color-neutral-darkest); --scheme-border:var(--color-dark-15);  background:var(--scheme-bg); color:var(--scheme-text); }

/* dark schemes flag for component tweaks (alternate) */
.scheme-2, .scheme-4{ --is-dark:1; }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{ margin:0; font-family:Inter,"Inter Placeholder",sans-serif; font-weight:400; color:var(--color-neutral-darkest); background:var(--color-white); line-height:1.5; }
h1,h2,h3,h4,h5,h6{ font-family:Inter,"Inter Placeholder",sans-serif; font-weight:500; margin:0; line-height:1.2; letter-spacing:-.01em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

/* ---------- Typography utilities ---------- */
.t-h1{ font-size:var(--text-h1); line-height:1.2; }
.t-h2{ font-size:var(--text-h2); line-height:1.2; }
.t-h3{ font-size:var(--text-h3); line-height:1.2; }
.t-h4{ font-size:var(--text-h4); line-height:1.3; }
.t-h5{ font-size:var(--text-h5); line-height:1.4; }
.t-large{ font-size:var(--text-large); line-height:1.5; }
.t-medium{ font-size:var(--text-medium); line-height:1.5; }
.t-small{ font-size:var(--text-small); line-height:1.5; }
.bold{ font-weight:700; }
.semibold{ font-weight:600; }

/* ---------- Layout helpers ---------- */
/* 45px top + 45px bottom → 90px between adjacent (touching) sections. */
.section{ padding:45px 5%; }
@media (min-width:768px){ .section{ padding:45px 5%; } }
@media (min-width:992px){ .section{ padding:45px 5%; } }
.container{ width:100%; max-width:var(--container); margin-inline:auto; }
.max-lg{ max-width:var(--max-lg); }
.max-md{ max-width:var(--max-md); }
.center{ text-align:center; margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.75rem; white-space:nowrap;
  border-radius:var(--radius-button); border:1px solid transparent; padding:.4rem 1.05rem;
  font-family:Inter,"Inter Placeholder",sans-serif; font-weight:500; font-size:.9rem; transition:all .2s ease; }
.btn-sm{ padding:.5rem 1.25rem; }
.btn-primary{ background:var(--color-science-blue); border-color:var(--color-science-blue); color:#fff; }
.btn-primary:hover{ background:var(--color-science-blue-dark); border-color:var(--color-science-blue-dark); }
.btn-secondary{ background:transparent; border-color:var(--scheme-border); color:var(--scheme-text); }
.btn-secondary:hover{ background:color-mix(in srgb,var(--scheme-text),transparent 94%); }
.btn-link{ background:none; border:none; padding:0; gap:.5rem; color:var(--scheme-text); font-family:Inter,"Inter Placeholder",sans-serif; font-weight:500; font-size:var(--text-medium); display:inline-flex; align-items:center; }
.btn-link svg{ transition:transform .2s ease; }
.btn-link:hover svg{ transform:translateX(3px); }
.btn .icon{ width:1.25rem; height:1.25rem; flex:none; }

/* ---------- Card ---------- */
.card{ overflow:hidden; border-radius:var(--radius-card); border:1px solid var(--scheme-border); background:var(--scheme-fg); color:var(--scheme-text); }

/* ---------- Badge ---------- */
.badge{ display:inline-flex; align-items:center; border-radius:var(--radius-badge); padding:.25rem .5rem;
  font-family:Inter,"Inter Placeholder",sans-serif; font-size:var(--text-small); font-weight:600; border:1px solid var(--scheme-border); color:var(--scheme-text); }

/* ---------- Input ---------- */
.input{ width:100%; min-height:2.75rem; padding:.5rem .75rem; border-radius:var(--radius-form);
  border:1px solid var(--scheme-border); background:transparent; color:var(--scheme-text);
  font-family:Inter,"Inter Placeholder",sans-serif; font-size:var(--text-medium); transition:all .2s ease; }
.input::placeholder{ color:color-mix(in srgb,var(--scheme-text),transparent 45%); }
.input:hover{ background:color-mix(in srgb,var(--scheme-text),transparent 95%); }
.input:focus{ outline:none; border-color:var(--scheme-text); }

/* ---------- Placeholder image panel ---------- */
.ph{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  width:100%; height:100%; background:var(--color-neutral-lightest);
  background-image:repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in srgb,var(--color-neutral-light),transparent 88%) 11px 12px);
  color:var(--color-neutral-light); }
.ph svg{ width:64px; height:64px; }
.ph .ph-cap{ font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; letter-spacing:.04em; color:var(--color-neutral); text-transform:lowercase; }
.rounded-img{ border-radius:var(--radius-image); overflow:hidden; }

/* logo inversion for dark schemes (white wordmark on dark) */
.logo-invert img{ filter:brightness(0) invert(1); }