/* ============================================================
   AutoClip Studio — Design Tokens
   Palette: navy ink + signal orange + tech teal on cool paper.
   Chosen to echo CapCut's own high-energy editing-suite feel
   without borrowing its literal marks.
   ============================================================ */

:root{
  /* --- Color: base --- */
  --ink-950:#0F1117;
  --ink-900:#14161F;
  --ink-800:#1C1F2B;
  --ink-700:#2A2E3D;
  --ink-600:#454A5E;
  --ink-500:#5B6178;
  --ink-300:#9297A8;

  --paper-0:#FFFFFF;
  --paper-50:#F5F5F3;
  --paper-100:#ECEDF1;
  --paper-200:#E1E3E9;

  /* --- Color: brand accent (signal orange) --- */
  --signal-600:#E1440C;
  --signal-500:#FF5A1F;
  --signal-400:#FF7A45;
  --signal-100:#FFE7DB;
  --signal-50:#FFF3EE;

  /* --- Color: secondary accent (render teal) --- */
  --teal-600:#0E9A79;
  --teal-500:#17B890;
  --teal-100:#DAF5EC;

  /* --- Semantic --- */
  --bg-page: var(--paper-50);
  --bg-surface: var(--paper-0);
  --bg-sunken: var(--paper-100);
  --bg-inverse: var(--ink-950);
  --text-primary: var(--ink-950);
  --text-secondary: var(--ink-600);
  --text-tertiary: var(--ink-500);
  --text-on-inverse: var(--paper-50);
  --border-subtle: var(--paper-200);
  --border-strong: var(--ink-700);
  --accent: var(--signal-500);
  --accent-strong: var(--signal-600);
  --accent-soft: var(--signal-100);
  --accent-2: var(--teal-500);
  --accent-2-soft: var(--teal-100);

  /* --- Type --- */
  --font-display:'Space Grotesk', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --fs-2xs:.6875rem;
  --fs-xs:.8125rem;
  --fs-sm:.9375rem;
  --fs-base:1rem;
  --fs-md:1.125rem;
  --fs-lg:1.375rem;
  --fs-xl:1.75rem;
  --fs-2xl:2.375rem;
  --fs-3xl:3.25rem;

  /* --- Layout --- */
  --container:1240px;
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(15,17,23,.06), 0 1px 1px rgba(15,17,23,.04);
  --shadow-md:0 8px 24px -8px rgba(15,17,23,.16);
  --shadow-lg:0 24px 48px -16px rgba(15,17,23,.24);
  --ease:cubic-bezier(.16,.8,.24,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-base);
  color:var(--text-primary);
  background:var(--bg-page);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  margin:0;
  line-height:1.12;
  letter-spacing:-.01em;
  font-weight:600;
}

p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

:focus-visible{
  outline:2px solid var(--signal-500);
  outline-offset:2px;
  border-radius:4px;
}

.mono{font-family:var(--font-mono);}
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}