/* ============================================================
   COMPASS PRODUCTIVITY — Design System CSS Variables
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Montserrat:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Color Palette ── */
:root {
  /* Base brand colors */
  --color-primary:        #1b335f;   /* Dark navy blue */
  --color-primary-dark:   #122344;   /* Darker navy */
  --color-primary-light:  #2a4a85;   /* Lighter navy */

  --color-accent:         #0aa3eb;   /* Bright cyan-blue */
  --color-accent-dark:    #0882bc;   /* Darker cyan */
  --color-accent-light:   #3db8f3;   /* Lighter cyan */

  --color-orange:         #FF6B02;   /* Vibrant orange */
  --color-orange-dark:    #d95800;   /* Darker orange */
  --color-orange-light:   #ff8c35;   /* Lighter orange */

  --color-purple:         #673ab7;   /* Medium purple */
  --color-purple-dark:    #4e2a8e;   /* Darker purple */
  --color-purple-light:   #8456cc;   /* Lighter purple */

  /* Neutrals */
  --color-white:          #ffffff;
  --color-grey-50:        #f4f6f9;
  --color-grey-100:       #e8ecf2;
  --color-grey-200:       #d1d9e6;
  --color-grey-300:       #b0bdce;
  --color-grey-400:       #8a94a6;
  --color-grey-500:       #637082;
  --color-grey-600:       #4a5568;
  --color-grey-700:       #2d3748;
  --color-grey-800:       #1a202c;
  --color-grey-900:       #0f1319;

  /* Semantic colors */
  --color-bg:             #f4f6f9;   /* App background */
  --color-surface:        #ffffff;   /* Cards, panels */
  --color-surface-alt:    #eef1f6;   /* Subtle surface variant */
  --color-border:         #e2e8f0;   /* Default border */
  --color-border-focus:   #0aa3eb;   /* Focus ring */

  --color-text-primary:   #1b335f;   /* Primary text */
  --color-text-secondary: #637082;   /* Secondary/muted text */
  --color-text-placeholder: #b0bdce; /* Placeholder text */
  --color-text-inverse:   #ffffff;   /* Text on dark bg */
  --color-text-link:      #0aa3eb;   /* Link color */

  --color-success:        #22c55e;
  --color-success-bg:     #f0fdf4;
  --color-warning:        #FF6B02;
  --color-warning-bg:     #fff7ed;
  --color-error:          #ef4444;
  --color-error-bg:       #fef2f2;
  --color-info:           #0aa3eb;
  --color-info-bg:        #eff9ff;
}

/* ── Typography Scale ── */
:root {
  /* Font families */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-ui:       'Montserrat', -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  /* Font sizes */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    16px;
  --text-lg:    18px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   30px;
  --text-4xl:   36px;
  --text-5xl:   48px;
  --text-6xl:   60px;

  /* Font weights */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;
  --tracking-widest: 0.15em;
}

/* ── Spacing Scale ── */
:root {
  --space-0:   0px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
}

/* ── Border Radius ── */
:root {
  --radius-none:   0px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     16px;
  --radius-2xl:    24px;
  --radius-full:   9999px;
}

/* ── Shadows ── */
:root {
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl:  0 20px 40px rgba(0,0,0,0.16), 0 8px 16px rgba(0,0,0,0.08);
  --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.06);

  /* Brand-tinted shadow for CTAs */
  --shadow-accent: 0 4px 16px rgba(10,163,235,0.30);
  --shadow-primary: 0 4px 16px rgba(27,51,95,0.25);
}

/* ── Transitions ── */
:root {
  --transition-fast:   150ms ease-out;
  --transition-base:   200ms ease-out;
  --transition-slow:   300ms ease-out;
}

/* ── Semantic Element Styles ── */

body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-primary);
}

h3 {
  font-family: var(--font-ui);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-primary);
}

h4 {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

h5, h6 {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-grey-700);
}

p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-grey-700);
}

small, .text-sm {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-grey-600);
}

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--color-grey-100);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  color: var(--color-primary);
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}