/*
  IBIZA Official Site theme layer (claw-a)
  Purpose: centralize design tokens (typography/spacing/colors) so partial edits don't drift.
  Rules:
  - New/modified UI should prefer these CSS variables + utilities.
  - Avoid hard-coding random px sizes in page-specific CSS.
*/

:root {
  /* Typography */
  --font-family-sans: 'Noto Sans TC', "Microsoft JhengHei", 微軟正黑體, Arial, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;

  /* Type scale (desktop-first) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;

  /* Spacing */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;

  /* Colors (align with existing palette in main.css) */
  --c-text: #171717;
  --c-muted: #756F77;
  --c-border: #efefef;
  --c-bg: #ffffff;
  --c-primary: #DF4994;
  --c-accent: #473692;
}

html, body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--c-text);
}

/* Utilities (use in new sections/pages) */
.text-muted { color: var(--c-muted); }
.text-primary { color: var(--c-primary); }

.fs-12 { font-size: var(--fs-12); }
.fs-14 { font-size: var(--fs-14); }
.fs-16 { font-size: var(--fs-16); }
.fs-18 { font-size: var(--fs-18); }
.fs-20 { font-size: var(--fs-20); }
.fs-24 { font-size: var(--fs-24); }
.fs-28 { font-size: var(--fs-28); }
.fs-32 { font-size: var(--fs-32); }
.fs-36 { font-size: var(--fs-36); }
.fs-48 { font-size: var(--fs-48); }

/* Default headings for new pages (do not aggressively override legacy selectors) */
.claw h1 { font-size: var(--fs-36); line-height: 1.2; margin: 0 0 var(--sp-16); }
.claw h2 { font-size: var(--fs-28); line-height: 1.25; margin: 0 0 var(--sp-12); }
.claw h3 { font-size: var(--fs-24); line-height: 1.3; margin: 0 0 var(--sp-12); }
.claw p  { margin: 0 0 var(--sp-12); }

/* Spacing helpers */
.mt-16 { margin-top: var(--sp-16); }
.mb-16 { margin-bottom: var(--sp-16); }
.py-24 { padding-top: var(--sp-24); padding-bottom: var(--sp-24); }