/**
 * SadMug - Design Tokens
 * Warm colors, sharp edges (0px border radius), expressive but clean.
 */

:root {
  /* Brand Colors */
  --color-red: #DB393C;
  --color-cream: #F2ECE8;
  --color-charcoal: #232323;
  --color-coffee: #502D16;
  --color-brown: #502D16;

  /* Functional Roles */
  --color-bg: var(--color-cream);
  --color-text: var(--color-charcoal);
  --color-border: var(--color-charcoal);
  --color-active: #C52B2E;
  --color-accent: var(--color-red);
  --color-link: var(--color-coffee);

  /* Typography */
  --font-family-base: 'Google Sans Flex', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-icon: 'Material Symbols Sharp';

  --font-size-nav: 1.125rem;  /* 18px */
  --font-size-h1: clamp(2rem, 4vw + 1rem, 3.5rem);
  --font-size-body: 1rem;
  --font-size-btn: 1.125rem;

  --line-height-normal: 1.4;

  /* Sharp Edges: No rounded corners anywhere */
  --radius-none: 0px;

  /* Borders */
  --border-width: 1px;
  --border-sharp: 1px solid var(--color-charcoal);
  --border-sharp-red: 1px solid var(--color-red);

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
  --spacing-2xl: 80px;

  --container-max-width: 1689px;
  --content-padding-x: clamp(1rem, 4vw, 5rem); /* up to 80px */

  /* Bento Grid Configuration */
  --bento-gap: 0;
  --bento-row-height: 250px;

  /* Focus Ring */
  --focus-ring: 2px solid var(--color-red);
  --focus-offset: 2px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease-in-out;
}