/* ===========================================================
   KomITi — design tokens
   Colors derived from existing brand CSS (komiti_web Odoo addon).
   Single source of truth: change here, propagate everywhere.
   =========================================================== */

:root {
  /* ---------- Color: brand ---------- */
  --color-accent:        #A65949;   /* terracotta — primary CTA */
  --color-accent-strong: #8D4C3E;   /* CTA hover */
  --color-accent-soft:   #C97D6D;   /* hover on dark surfaces */

  /* ---------- Color: surfaces ---------- */
  --color-bg-deep:   #16202A;       /* dark page bg */
  --color-bg-slate:  #2C3844;       /* dark surface (cards, nav) */
  --color-bg-mid:    #5F7279;       /* muted divider */
  --color-bg-cream:  #ECE5D7;       /* light page bg */
  --color-bg-white:  #FFFFFF;

  /* ---------- Color: text ---------- */
  --color-text-on-dark:  #ECE5D7;
  --color-text-muted-on-dark: #B6BBC2;
  --color-text-on-light: #2C3844;
  --color-text-muted-on-light: #5F7279;

  /* ---------- Color: lines ---------- */
  --color-line-on-dark:  rgba(236,229,215,0.12);
  --color-line-on-light: rgba(44,56,68,0.14);

  /* ---------- Typography ---------- */
  --font-display: "Fraunces", "FrauncesFallback", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-100: 0.8125rem;   /* 13 */
  --fs-200: 0.9375rem;   /* 15 */
  --fs-300: 1rem;        /* 16 */
  --fs-400: 1.125rem;    /* 18 */
  --fs-500: 1.375rem;    /* 22 */
  --fs-600: 1.75rem;     /* 28 */
  --fs-700: 2.25rem;     /* 36 */
  --fs-800: 3rem;        /* 48 */
  --fs-900: clamp(2.75rem, 6vw, 5.25rem);  /* hero */

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.55;

  --tracking-tight: -0.02em;
  --tracking-display: -0.025em;

  /* ---------- Spacing scale (4‑pt) ---------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  /* ---------- Layout ---------- */
  --content-max:  1240px;
  --gutter:       clamp(1.25rem, 4vw, 3rem);
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    22px;
  --radius-pill:  999px;

  /* ---------- Effects ---------- */
  --shadow-card:  0 1px 2px rgba(0,0,0,.18), 0 12px 32px -12px rgba(0,0,0,.45);
  --transition-fast: 150ms ease;
  --transition-med:  300ms cubic-bezier(.2,.7,.2,1);
}

/* ---------- Light scheme override ---------- */
[data-theme="light"] {
  --color-page-bg:   var(--color-bg-cream);
  --color-page-fg:   var(--color-text-on-light);
  --color-page-fg-muted: var(--color-text-muted-on-light);
  --color-surface:   var(--color-bg-white);
  --color-line:      var(--color-line-on-light);
  --color-link:      var(--color-accent-strong);
}

/* ---------- Dark scheme (default) ---------- */
:root,
[data-theme="dark"] {
  --color-page-bg:   var(--color-bg-deep);
  --color-page-fg:   var(--color-text-on-dark);
  --color-page-fg-muted: var(--color-text-muted-on-dark);
  --color-surface:   var(--color-bg-slate);
  --color-line:      var(--color-line-on-dark);
  --color-link:      var(--color-accent-soft);
}