/* ============================================================
   Social Engine — Design Tokens
   Synamesh design language · dark theme only
   oklch = source of truth. Hex shown for reference/fallback.
   @theme-compatible: paste the --* lines into a Tailwind v4
   @theme { } block to expose them as utilities.
   ============================================================ */

:root {
  /* ---- Core surface palette (navy) ---- */
  --navy:            oklch(22% 0.025 265);   /* #151A26  page background        */
  --navy-light:      oklch(27% 0.025 265);   /* #202633  raised sections, nav   */
  --navy-card:       oklch(30% 0.025 265);   /* #262D3B  cards, panels          */
  --navy-border:     oklch(34% 0.025 265);   /* #2F3745  hairlines, dividers    */
  --navy-hover:      oklch(33% 0.025 265);   /* row / control hover fill        */
  --navy-inset:      oklch(19% 0.025 265);   /* wells, code blocks, track       */

  /* ---- Accent (amber) — use sparingly, one per view ---- */
  --amber:           oklch(77% 0.13 82);     /* #E2A75D  primary action, active */
  --amber-light:     oklch(83% 0.12 82);     /* #F0BE7D  hover, highlight        */
  --amber-dim:       oklch(77% 0.13 82 / 0.16); /* tint fills, active bg        */
  --amber-ring:      oklch(83% 0.12 82 / 0.55); /* focus ring                   */

  /* ---- Text ---- */
  --text-primary:    oklch(97% 0.008 265);   /* #F4F5F8  headings, key numbers  */
  --text-secondary:  oklch(78% 0.018 265);   /* #B7BCC8  body                   */
  --text-muted:      oklch(60% 0.022 265);   /* #838A99  meta, timestamps       */
  --text-onaccent:   oklch(22% 0.03 82);     /* text on amber buttons           */

  /* ---- Semantic status (low chroma, harmonized) ---- */
  --success:         oklch(72% 0.10 158);    /* ≈#5FB489  published / healthy   */
  --success-dim:     oklch(72% 0.10 158 / 0.16);
  --danger:          oklch(64% 0.13 25);     /* ≈#CE6B5F  failed / destructive  */
  --danger-dim:      oklch(64% 0.13 25 / 0.16);
  --warning:         oklch(80% 0.12 78);     /* ≈#E7B067  pending (amber lean)  */
  --warning-dim:     oklch(80% 0.12 78 / 0.16);
  --info:            oklch(70% 0.085 245);   /* ≈#7A9CC6  processing            */
  --info-dim:        oklch(70% 0.085 245 / 0.16);

  /* ---- Platform identity (subtle, not logo-loud) ---- */
  --ig:              oklch(68% 0.11 350);    /* ≈#C77FA1  Instagram             */
  --ig-dim:          oklch(68% 0.11 350 / 0.16);
  --fb:              oklch(66% 0.095 255);   /* ≈#7590C1  Facebook              */
  --fb-dim:          oklch(66% 0.095 255 / 0.16);
  --yt:              oklch(55% 0.02 265);    /* greyed "soon"                   */

  /* ---- Typography ---- */
  --font-serif: "Literata", Georgia, "Times New Roman", serif;
  --font-sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --font-features-sans: "ss01" 1, "cv11" 1;

  /* type scale (size / line-height) */
  --fs-display: 3rem;      --lh-display: 1.08;   /* 48  Literata */
  --fs-h1:      2.125rem;  --lh-h1:      1.16;   /* 34  Literata */
  --fs-h2:      1.625rem;  --lh-h2:      1.24;   /* 26  Literata */
  --fs-h3:      1.25rem;   --lh-h3:      1.32;   /* 20  Literata */
  --fs-h4:      1.0625rem; --lh-h4:      1.4;    /* 17  Hanken   */
  --fs-body:    0.9375rem; --lh-body:    1.55;   /* 15  Hanken   */
  --fs-small:   0.8125rem; --lh-small:   1.5;    /* 13  Hanken   */
  --fs-micro:   0.6875rem; --lh-micro:   1.4;    /* 11  Hanken label */
  --fs-mono:    0.8125rem;                       /* 13  mono     */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body:    0;
  --ls-label:   0.08em;   /* micro-labels, uppercase */

  /* ---- Spacing (4px base) ---- */
  --sp-0: 0;      --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;   --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;
  --sp-10: 2.5rem; --sp-12: 3rem;   --sp-16: 4rem;    --sp-20: 5rem;
  --sp-24: 6rem;

  /* ---- Radii ---- */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-card: 16px;
  --r-xl:  22px;
  --r-pill: 999px;

  /* ---- Shadows (low elevation) ---- */
  --sh-1: 0 1px 2px rgba(0,0,0,0.30);
  --sh-2: 0 6px 20px rgba(0,0,0,0.35);
  --sh-3: 0 24px 60px rgba(0,0,0,0.55);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,0.02);

  /* ---- Motion ---- */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 250ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* ---- Breakpoints (reference; used in media queries) ---- */
  --bp-phone:   390px;
  --bp-tablet:  768px;
  --bp-desktop: 1280px;

  /* ---- z-index ---- */
  --z-nav: 100;
  --z-dropdown: 200;
  --z-sticky: 300;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;
}