/* Design tokens — values verified against Figma API node data */
/* Ported from burke-williams-booking-kit/tokens/tokens.css */

:root {
  /* ── Colours (from Figma fills) ── */
  --color-bg:          #ece8dd;  /* page background */
  --color-bg-cream:    #fffdf8;  /* surface, inputs, sidebar — Figma #fffdf8 */
  --color-surface:     #ffffff;  /* pure white cards, nav */

  /* Primary blue — Figma fills on Button, logo, links: #335d88 */
  --color-primary:       #335d88;
  --color-primary-hover: #274a6f;
  --color-primary-muted: rgba(51, 93, 136, 0.12);

  /* Text — Figma text fills */
  --color-text-primary:   #1a1712;  /* dark body text */
  --color-text-secondary: #515151;  /* secondary, "Remember Me", table text */
  --color-text-muted:     #8194a2;  /* placeholder, labels — Figma input label */
  --color-text-inverse:   #fffcf6;  /* button label on primary bg */

  /* Borders — Figma stroke values */
  --color-border:         #e8e8e9;  /* general dividers */
  --color-border-light:   #f1f2f4;  /* table footer divider */
  --color-border-input:   #8194a2;  /* input stroke — Figma "input-field" */

  /* Status/semantic */
  --color-success:        #6f8a5e;
  --color-success-bg:     #c8d7c2;  /* badge fill — Figma Badge node */
  --color-error:          #c0392b;
  --color-focus:          #335d88;

  /* Nav */
  --color-nav-bg:         rgba(255, 255, 255, 0.34); /* Figma Top Nav fillOpacity 0.34 */
  --color-nav-border:     rgba(26, 23, 18, 0.08);

  /* Accents */
  --color-accent-terracotta: #c26a4f;   /* Pricing Region active toggle */
  --color-active-pill:        #ece8dd;  /* sidebar active item bg */
  --color-active-pill-text:   #335d88;

  /* ── Typography ── */
  --font-body:    'Barlow', system-ui, sans-serif;
  --font-heading: 'Teodor TRIAL', 'Teodor', 'Cormorant Garamond', Georgia, serif;
  --font-display: 'Epilogue', var(--font-body);

  /* Font sizes — matched to Figma style scale */
  --font-size-xs:      0.75rem;   /* 12px  — input labels */
  --font-size-sm:      0.875rem;  /* 14px  — table meta, helper */
  --font-size-base:    0.9375rem; /* 15px  — body links (Figma 15px) */
  --font-size-md:      1rem;      /* 16px  — button labels, body */
  --font-size-lg:      1.125rem;  /* 18px  — product name */
  --font-size-xl:      1.25rem;   /* 20px  — product price (Teodor) */
  --font-size-2xl:     1.75rem;   /* 28px  — section heading (Teodor 28/350) */
  --font-size-3xl:     3.75rem;   /* 60px  — large heading */
  --font-size-display: 8.75rem;   /* 140px — watermark labels */

  --line-height-tight:   1.2;
  --line-height-base:    1.5;
  --line-height-relaxed: 1.4;

  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-heading:  350;  /* Teodor weight */

  --letter-spacing-wide:    0.07em;
  --letter-spacing-display: 0.03em;
  --letter-spacing-button:  0.02em;  /* Figma: 0.32px on 16px = 0.02em */

  /* ── Spacing ── */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 5rem;     /* 80px */

  /* ── Layout ── */
  --grid-columns:   17;
  --grid-gutter:    1.625rem;  /* 26px */
  --grid-margin:    2rem;      /* 32px */
  --grid-max-width: 120rem;    /* 1920px */
  --sidebar-width:  19.125rem; /* 306px — Figma Sidebar Menu */

  /* ── Radii — from Figma cornerRadius ── */
  --radius-input:   0.375rem; /* 6px — input-field node: r:6 */
  --radius-sm:      0.5rem;   /* 8px — dropdown, social btn: r:8 */
  --radius-md:      0.625rem; /* 10px — Sidebar, Table, Filter panel: r:10 */
  --radius-lg:      0.75rem;  /* 12px — content cards: r:12 */
  --radius-xl:      2.5rem;   /* 40px — outline button: r:40 */
  --radius-pill:    6.25rem;  /* 100px — primary button: r:100 */
  --radius-badge:   0.875rem; /* 14px — status Badge: r:14 */
  --radius-button:  6.25rem;  /* 100px — alias for pill */

  /* ── Shadows ── */
  --shadow-sm:    0 0.0625rem 0.125rem rgba(26, 23, 18, 0.06);  /* 0 1px 2px */
  --shadow-md:    0 0.25rem 1rem rgba(26, 23, 18, 0.08);        /* 0 4px 16px */
  --shadow-lg:    0 0.5rem 2rem rgba(26, 23, 18, 0.12);         /* 0 8px 32px */
  --shadow-glass: 0 0.25rem 1.5rem rgba(52, 93, 136, 0.08);     /* 0 4px 24px */

  /* ── Motion ── */
  --duration-fast:   150ms;
  --duration-normal: 200ms;
  --duration-slow:   400ms;
  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth:     cubic-bezier(0.2, 0, 0, 1);

  /* ── Z-index ── */
  --z-nav:          100;
  --z-modal:        200;
  --z-tooltip:      300;
  --z-notification: 400;
}