/* Inspired by: nada-shop main.css (design framework + tokens) */

:root {
  font-size: clamp(17px, 2.5vw, 20px);
  --line-height-message: 1.5;
  --font-inner-offset: 2px;
  --font-bold: 800;

  --site-max-width: 75rem;

  /* Theme colors (kept as tokens; app uses neutrals only for now) */
  --color-text: #1e293b;
  --color-text-light: #64748b;
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-light: #60a5fa;
  --color-secondary: #64748b;
  --color-secondary-dark: #4b5563;
  --color-secondary-light: #94a3b8;
  --color-background: #ffffff;
  --color-surface: #f8fafc;
  --color-surface-dark: #e2e8f0;
  --color-outline: #e2e8f0;
  --color-accent: #f59e0b;
  --color-error: #ef4444;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-disabled: #c4c9d0;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-shadow-light: rgba(0, 0, 0, 0.1);
  --color-shadow-medium: rgba(0, 0, 0, 0.2);
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-today: #fffbeb; /* ultra-soft yellow */

  /* Scale (1.200 Minor Third) */
  --size-5xl: 3.584rem;
  --size-4xl: 2.986rem;
  --size-3xl: 2.488rem;
  --size-2xl: 2.074rem;
  --size-xl: 1.728rem;
  --size-lg: 1.44rem;
  --size-md: 1.2rem;
  --size-bs: 1rem;
  --size-sm: 0.833rem;
  --size-xs: 0.694rem;
  --size-2xs: 0.579rem;
  --size-3xs: 0.481rem;

  /* Spacing */
  --space-4xl: var(--size-4xl);
  --space-3xl: var(--size-3xl);
  --space-2xl: var(--size-2xl);
  --space-xl: var(--size-xl);
  --space-lg: var(--size-lg);
  --space-md: var(--size-md);
  --space-bs: var(--size-bs);
  --space-half-bs: calc(var(--size-bs) / 2);
  --space-sm: var(--size-sm);
  --space-half-sm: calc(var(--size-sm) / 2);
  --space-xs: var(--size-xs);

  /* Border radius */
  --radius-full: 9999px;
  --radius-bs: var(--size-bs);
  --radius-sm: var(--size-sm);
  --radius-xs: var(--size-xs);
  --radius-half-sm: calc(var(--size-xs) / 2);
  --radius-min: 3px;

  /* Padding */
  --padding-2bs: calc(var(--space-bs) * 2);
  --padding-bs: var(--space-bs);
  --padding-half-bs: calc(var(--space-bs) / 2);
  --padding-xs: var(--space-xs);
  --padding-half-xs: calc(var(--space-xs) / 2);

  /* Gap */
  --gap-bs: var(--space-bs);
  --gap-half-bs: calc(var(--space-bs) / 2);

  /* Transitions */
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;

  /* Borders */
  --outline-width: 1px;
  --outline-offset: -1px;

  /* Shadows */
  --shadow-sm: 0 1px 2px;
  --shadow-md: 0 2px 8px;
  --shadow-lg: 0 2px 12px;
  --shadow-xl: 0 20px 25px -5px;

  /* Sidebar width (user adjustable) */
  --sidebar-w: 25vw;

  /* Planner metrics */
  --planner-row-h: 2.35rem;
  --planner-day-w: 2.1rem;
  --planner-label-w: 9rem;
  --planner-sticky-h: 3.1rem;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  text-decoration: none;
}

input,
button,
textarea,
select {
  font: inherit;
}

body {
  font-size: var(--size-bs);
  line-height: 1.4;
  font-family:
    "Geist",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    sans-serif;
  font-weight: 300;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  background: var(--color-surface);
  height: 100dvh;
  overflow: hidden;
}

button {
  color: inherit;
}

::selection {
  background: rgba(0, 0, 0, 0.06);
}