/* =========================================================
   zentrixops-theme.css
   ZentrixOps design tokens as CSS custom properties.
   Warm palette · one accent · Fraunces / Inter / JetBrains Mono.
   ========================================================= */

:root {
  /* --- Brand colour --- */
  --accent:        #C24327;   /* brand orange — links, labels, marks */
  --accent-hover:  #A2361E;
  --accent-dark:   #EE8C68;   /* lighter tint — ONLY on dark backgrounds */

  /* --- Neutrals (warm throughout — never cool/blue greys) --- */
  --ink:           #1C1A16;
  --paper:         #FAF8F3;
  --ink-dark-bg:   #191713;
  --grey-100:      #F2EFE8;
  --grey-200:      #E6E1D6;
  --grey-400:      #A8A29A;
  --grey-500:      #736E66;
  --grey-600:      #54504A;
  --white:         #FFFFFF;

  /* --- Type --- */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* --- Radius --- */
  --radius:      0.75rem;
  --radius-lg:   1.5rem;
  --radius-xl:   2rem;
  --radius-pill: 9999px;

  /* --- Motion (curves from the animate skill — never hand-rolled) --- */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* --- Shadow (warm, soft — no glows / neon) --- */
  --shadow-card: 0 1px 2px rgba(30, 25, 15, 0.05);
  --shadow-lift: 6px 6px 0 rgba(28, 26, 22, 0.07);

  /* --- Layout --- */
  --max-width:       80rem;
  --section-mobile:  3.5rem;
  --section-desktop: 6rem;

  /* ---- Semantic roles (light theme) ---- */
  --bg:         var(--paper);
  --surface:    var(--white);
  --text:       var(--ink);
  --text-muted: var(--grey-600);
  --text-faint: var(--grey-500);
  --border:     var(--grey-200);
  --tint:       var(--grey-100);
  --accent-fg:  var(--accent);       /* accent that sits on the page bg */
  --accent-fg-hover: var(--accent-hover);
}

/* ---- Dark theme: explicit opt-in ---- */
:root[data-theme="dark"] {
  --bg:         var(--ink-dark-bg);
  --surface:    #221F19;
  --text:       var(--paper);
  --text-muted: #CBC5B9;
  --text-faint: #A8A29A;
  --border:     #34302A;
  --tint:       #201D18;
  --accent-fg:  var(--accent-dark);  /* base orange fails contrast on dark */
  --accent-fg-hover: #F2A483;
  --shadow-lift: 6px 6px 0 rgba(0, 0, 0, 0.35);
}

/* ---- Dark theme: follow OS when user hasn't chosen ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         var(--ink-dark-bg);
    --surface:    #221F19;
    --text:       var(--paper);
    --text-muted: #CBC5B9;
    --text-faint: #A8A29A;
    --border:     #34302A;
    --tint:       #201D18;
    --accent-fg:  var(--accent-dark);
    --accent-fg-hover: #F2A483;
    --shadow-lift: 6px 6px 0 rgba(0, 0, 0, 0.35);
  }
}