/* ==========================================================================
   Daybreak Design System
   "The Golden Hour" -- morning clarity meets calm optimism
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties -- Full Daybreak Palette
   -------------------------------------------------------------------------- */
:root {
  /* Primary */
  --color-primary: #944a00;
  --color-on-primary: #ffffff;
  --color-primary-container: #e67e22;
  --color-on-primary-container: #502600;
  --color-inverse-primary: #ffb783;

  /* Secondary */
  --color-secondary: #615e58;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #e7e2da;
  --color-on-secondary-container: #67645e;

  /* Tertiary */
  --color-tertiary: #5d5f5f;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #989999;
  --color-on-tertiary-container: #2f3132;

  /* Error */
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  /* Surface */
  --color-surface: #fff8f4;
  --color-surface-dim: #e1d8d2;
  --color-surface-bright: #fff8f4;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #fbf2eb;
  --color-surface-container: #f5ece5;
  --color-surface-container-high: #f0e7df;
  --color-surface-container-highest: #eae1da;
  --color-on-surface: #1f1b17;
  --color-on-surface-variant: #564337;
  --color-inverse-surface: #34302b;
  --color-inverse-on-surface: #f8efe8;
  --color-surface-tint: #944a00;
  --color-surface-variant: #eae1da;

  /* Outline */
  --color-outline: #897365;
  --color-outline-variant: #dcc1b1;

  /* Background */
  --color-background: #fff8f4;
  --color-on-background: #1f1b17;

  /* Fixed colors */
  --color-primary-fixed: #ffdcc5;
  --color-primary-fixed-dim: #ffb783;
  --color-on-primary-fixed: #301400;
  --color-on-primary-fixed-variant: #713700;
  --color-secondary-fixed: #e7e2da;
  --color-secondary-fixed-dim: #cac6be;
  --color-on-secondary-fixed: #1d1c17;
  --color-on-secondary-fixed-variant: #494741;
  --color-tertiary-fixed: #e2e2e2;
  --color-tertiary-fixed-dim: #c6c6c7;
  --color-on-tertiary-fixed: #1a1c1c;
  --color-on-tertiary-fixed-variant: #454747;

  /* --------------------------------------------------------------------------
     Category Colors (from Weekly Review mockup)
     -------------------------------------------------------------------------- */
  --color-category-business: #4a90e2;
  --color-category-business-bg: #f0f4f8;
  --color-category-health: #50c878;
  --color-category-health-bg: #f2f7f4;
  --color-category-home: #e67e22;
  --color-category-home-bg: #fff8f4;

  /* --------------------------------------------------------------------------
     Spacing (8px rhythmic scale)
     -------------------------------------------------------------------------- */
  --space-xs: 4px;
  --space-base: 8px;
  --space-sm: 12px;
  --space-md: 24px;
  --space-gutter: 24px;
  --space-margin: 32px;
  --space-lg: 40px;
  --space-xl: 64px;

  /* --------------------------------------------------------------------------
     Border Radius
     -------------------------------------------------------------------------- */
  --radius-sm: 0.25rem;
  --radius-default: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* --------------------------------------------------------------------------
     Elevation -- tinted shadows per design spec
     -------------------------------------------------------------------------- */
  --shadow-card: 0 4px 24px -8px rgba(74, 69, 64, 0.04);
  --shadow-sm: 0 2px 8px rgba(74, 69, 64, 0.04);
}


/* --------------------------------------------------------------------------
   2. Base Styles
   -------------------------------------------------------------------------- */
body {
  background-color: var(--color-background);
  color: var(--color-on-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
}


/* --------------------------------------------------------------------------
   3. Material Symbols Icon Setup
   -------------------------------------------------------------------------- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.fill-icon {
  font-variation-settings: 'FILL' 1;
}


/* --------------------------------------------------------------------------
   4. Typography Classes
   Manrope is loaded via Google Fonts in the HTML.
   These classes mirror the design system scale for use outside Tailwind.
   -------------------------------------------------------------------------- */
.daybreak-headline-xl {
  font-family: 'Manrope', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.02em;
}

.daybreak-headline-lg {
  font-family: 'Manrope', sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.01em;
}

.daybreak-headline-md {
  font-family: 'Manrope', sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}

.daybreak-body-lg {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

.daybreak-body-md {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.daybreak-label-md {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
}

.daybreak-label-sm {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}


/* --------------------------------------------------------------------------
   5. Category Block Utilities
   Per the design spec: 5% background tint + solid 2px left-border accent
   -------------------------------------------------------------------------- */
.category-business {
  background-color: var(--color-category-business-bg);
  border-left: 2px solid var(--color-category-business);
}

.category-health {
  background-color: var(--color-category-health-bg);
  border-left: 2px solid var(--color-category-health);
}

.category-home {
  background-color: var(--color-category-home-bg);
  border-left: 2px solid var(--color-category-home);
}