/* Round Online · design tokens · single source of truth for color · type · spacing */

:root {
  /* Brand colors · Thai-modern palette */
  --color-ink:    #15161A;
  --color-paper:  #F5F1E9;
  --color-teal:   #166B63;
  --color-gold:   #A68942;
  --color-gray:   #8a867e;

  /* Derived · text + surface */
  --color-bg:        var(--color-paper);
  --color-fg:        var(--color-ink);
  --color-fg-muted:  var(--color-gray);
  --color-accent:    var(--color-teal);
  --color-accent-2:  var(--color-gold);

  /* Surfaces (dark variant for hero / press / specific pages) */
  --color-surface-dark:  var(--color-ink);
  --color-fg-on-dark:    var(--color-paper);

  /* Borders */
  --color-border:        #E5DCC8;
  --color-border-strong: #C4B898;

  /* Type */
  --font-display: "Fraunces", "Sarabun", Georgia, "Cormorant Garamond", serif;
  --font-body:    "Inter", "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-thai:    "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:    0.75rem;    /* 12px · floor per memory */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-md:    1.125rem;   /* 18px */
  --fs-lg:    1.375rem;   /* 22px */
  --fs-xl:    1.75rem;    /* 28px */
  --fs-2xl:   2.25rem;    /* 36px */
  --fs-3xl:   3rem;       /* 48px */
  --fs-4xl:   4rem;       /* 64px */

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-base:   1.55;
  --lh-loose:  1.75;

  /* Spacing · 8px base · φ-friendly */
  --sp-1:   0.25rem;     /* 4 */
  --sp-2:   0.5rem;      /* 8 */
  --sp-3:   0.75rem;     /* 12 */
  --sp-4:   1rem;        /* 16 */
  --sp-5:   1.5rem;      /* 24 */
  --sp-6:   2rem;        /* 32 */
  --sp-7:   3rem;        /* 48 */
  --sp-8:   4rem;        /* 64 */
  --sp-9:   6rem;        /* 96 */
  --sp-10:  8rem;        /* 128 */

  /* Layout */
  --container-max: 64rem;     /* 1024px · reading-comfortable */
  --container-prose: 38rem;   /* 608px · long-form text width */
  --container-wide: 80rem;    /* 1280px · hero/marketing */

  /* Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* Shadows · used sparingly */
  --shadow-sm: 0 1px 2px rgba(21, 22, 26, 0.05);
  --shadow-md: 0 4px 12px rgba(21, 22, 26, 0.08);
  --shadow-lg: 0 12px 32px rgba(21, 22, 26, 0.12);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;
}

/* Light is the brand · no auto-dark · keep consistent identity
   If a manual toggle is added later, scope dark via a class (e.g., html.dark) */