/* =========================================================
   FILE: assets/brand.css
   Purpose:
   - Self-hosted variable fonts (OFL) + canonical Renewt3ch tokens
   - Safe fallbacks when color-mix / oklab isn’t supported
   Notes:
   - Font URLs are relative to THIS CSS file.
   ========================================================= */

/* ---------- Variable Fonts (relative to /assets/brand.css) ---------- */
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/inter/Inter-VariableFont_opsz,wght.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/inter/Inter-Italic-VariableFont_opsz,wght.woff2") format("woff2");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Poppins";
  src:url("/assets/fonts/poppins/Poppins-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Poppins";
  src:url("/assets/fonts/poppins/Poppins-Italic.woff2") format("woff2");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Poppins";
  src:url("/assets/fonts/poppins/Poppins-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("/assets/fonts/space-grotesk/SpaceGrotesk-VariableFont_wght.woff2") format("woff2");
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}

/* ---------- Tokens (canonical palette) ---------- */
:root{
  /* Font stacks */
  --font-display:"Poppins","Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,ui-sans-serif,sans-serif;
  --font-sans-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,ui-sans-serif,sans-serif;
  --font-alt:"Space Grotesk","Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,ui-sans-serif,sans-serif;

  /* Weights */
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* Type scale */
  --size-hero:clamp(3rem,6vw + 1rem,4.5rem);
  --size-section:clamp(2rem,3vw + 0.5rem,3rem);
  --size-sub:clamp(1.375rem,1.25vw + 1rem,1.75rem);
  --size-ui:clamp(0.875rem,0.5vw + 0.5rem,1.125rem);
  --size-body:clamp(1rem,0.25vw + 0.875rem,1.125rem);
  --size-caption:clamp(0.75rem,0.25vw + 0.625rem,0.875rem);

  /* Canonical Renewt3ch palette */
  --color-bg:#111111;           /* Void Black (canonical) */
  --color-bg-elevated:#151515;  /* Graphite */
  --color-slate:#222222;        /* Deep Slate */
  --color-fg:#FFFFFF;           /* White */
  --color-accent:#0C85FF;       /* Infinite Blue */
  --color-accent-2:#2FF3E0;     /* Aqua Mint */

  /* Derived (fallback-first; upgraded via @supports below) */
  --color-fg-muted:rgba(255,255,255,.72);
  --color-border:rgba(148,163,184,.18);
  --color-accent-contrast:#071018;

  /* Surfaces */
  --radius:12px;
  --shadow-1:0 1px 2px rgba(0,0,0,.12), 0 10px 26px rgba(0,0,0,.24);

  /* Helps built-in form controls */
  color-scheme:dark light;
}

/* Upgrade derived tokens if color-mix is supported */
@supports (color: color-mix(in oklab, white, black)){
  :root{
    --color-fg-muted:color-mix(in oklab, var(--color-fg), var(--color-bg) 58%);
    --color-border:color-mix(in oklab, var(--color-fg), transparent 82%);
  }
}

/* Optional light theme */
:root[data-theme="light"]{
  --color-bg:#FFFFFF;
  --color-bg-elevated:#F6F7F9;
  --color-slate:#E5E7EB;
  --color-fg:#0D0D0D;
  --color-fg-muted:#4B5563;
  --color-border:#E5E7EB;
  --color-accent-contrast:#FFFFFF;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html,body{
  background:var(--color-bg);
  color:var(--color-fg);
}
body{
  font-family:var(--font-sans-ui);
  font-weight:var(--weight-regular);
  font-size:var(--size-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  margin:0;
}
img{ max-width:100%; height:auto; display:block; }

/* ---------- Type mappings ---------- */
.hero, h1.hero{
  font-family:var(--font-display);
  font-weight:var(--weight-bold);
  font-size:var(--size-hero);
  line-height:1.1;
}
.section-title, h2.section-title{
  font-family:var(--font-display);
  font-weight:var(--weight-semibold);
  font-size:var(--size-section);
  line-height:1.2;
}
.subheading, h3.subheading{
  font-family:var(--font-alt);
  font-weight:var(--weight-medium);
  font-size:var(--size-sub);
  line-height:1.2;
}
.label, .btn, button, [role="button"]{
  font-family:var(--font-sans-ui);
  font-weight:var(--weight-medium);
  font-size:var(--size-ui);
}
.caption, small{
  font-family:var(--font-sans-ui);
  font-weight:var(--weight-regular);
  font-size:var(--size-caption);
  color:var(--color-fg-muted);
}

/* ---------- Components ---------- */
.card{
  background:var(--color-bg-elevated);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.65rem 1rem;
  border-radius:calc(var(--radius) - 4px);
  color:var(--color-accent-contrast);
  background:var(--color-accent);
  border:1px solid rgba(0,0,0,.18); /* fallback */
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
@supports (color: color-mix(in oklab, white, black)){
  .btn{
    border-color:color-mix(in oklab, var(--color-accent), black 18%);
  }
}
.btn:is(:hover,:focus-visible){
  filter:saturate(1.05) brightness(1.03);
  transform:translateY(-1px);
}
.btn:active{ transform:translateY(0); }
.btn:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}
.btn:disabled,
.btn[aria-disabled="true"]{
  opacity:.6;
  cursor:not-allowed;
}

/* Alt */
.btn--alt{
  background:var(--color-accent-2);
  color:#071018;
  border-color:rgba(0,0,0,.18);
}
@supports (color: color-mix(in oklab, white, black)){
  .btn--alt{
    border-color:color-mix(in oklab, var(--color-accent-2), black 18%);
  }
}

/* Hollow glow */
.btn--glow{
  background:transparent;
  color:var(--color-fg);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 0 26px rgba(12,133,255,.22);
}
.btn--glow:is(:hover,:focus-visible){
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 0 36px rgba(12,133,255,.34);
}

/* Ghost */
.btn--ghost{
  background:rgba(255,255,255,.04);
  color:var(--color-fg);
  border:1px solid rgba(148,163,184,.22);
}

/* ---------- Links ---------- */
a.link{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.35);
  text-underline-offset:2px;
}
a.link:hover{ text-decoration-color:var(--color-fg); }

/* ---------- Forms (base) ---------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea,
select{
  appearance:none;
  width:100%;
  padding:.6rem .75rem;
  border-radius:10px;
  border:1px solid var(--color-border);
  background:var(--color-bg-elevated);
  color:var(--color-fg);
  font:inherit;
  line-height:1.4;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder,
textarea::placeholder{ color:var(--color-fg-muted); }

input:focus,
textarea:focus,
select:focus{
  border-color:var(--color-accent);
  box-shadow:0 0 0 3px rgba(12,133,255,.22);
}
@supports (color: color-mix(in oklab, white, black)){
  input:focus,
  textarea:focus,
  select:focus{
    border-color:color-mix(in oklab, var(--color-accent), black 15%);
    box-shadow:0 0 0 3px color-mix(in oklab, var(--color-accent), transparent 75%);
  }
}

input:disabled,
textarea:disabled,
select:disabled{
  opacity:.6;
  cursor:not-allowed;
  background:rgba(255,255,255,.03);
}

label{ font-size:.9rem; color:var(--color-fg); }
.field{ display:grid; gap:.4rem; }
fieldset{ border:1px solid var(--color-border); border-radius:10px; padding:.8rem 1rem; }
legend{ padding:0 .4rem; color:var(--color-fg-muted); }

/* ---------- Prose ---------- */
.prose{
  color:var(--color-fg);
  font-family:var(--font-sans-ui);
}
.prose h1,.prose h2,.prose h3{
  font-family:var(--font-display);
  font-weight:var(--weight-semibold);
  line-height:1.2;
  margin:1.2em 0 .4em;
}
.prose h1{ font-size:clamp(1.8rem,2.5vw,2.4rem); }
.prose h2{ font-size:clamp(1.4rem,2vw,1.8rem); }
.prose h3{ font-size:clamp(1.15rem,1.5vw,1.25rem); }

.prose p{ margin:.6em 0; }
.prose ul,.prose ol{ margin:.6em 0 .6em 1.2em; }
.prose li + li{ margin-top:.25em; }

.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:.9em;
  background:rgba(0,0,0,.28);
  border:1px solid var(--color-border);
  border-radius:6px;
  padding:.15rem .35rem;
  color:#E9F2FF;
}
.prose pre{
  background:rgba(0,0,0,.30);
  border:1px solid var(--color-border);
  border-radius:10px;
  padding:.9rem 1rem;
  overflow:auto;
}
.prose blockquote{
  margin:.8em 0;
  padding-left:1rem;
  border-left:3px solid rgba(255,255,255,.24);
  color:var(--color-fg-muted);
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce){
  .btn{ transition:none; }
  .btn:is(:hover,:focus-visible){ transform:none; }
}