/**
 * CSS Custom Properties (Variables)
 * "Augusta Editorial" design system
 * Luxury golf aesthetic with warm tones and refined typography
 */

:root {
  /* ── Color Palette ── */
  --color-primary: #1a3a2a;
  --color-primary-dark: #0f2419;
  --color-primary-light: #2d5a3f;

  --color-secondary: #c5a044;
  --color-secondary-dark: #a8862e;
  --color-secondary-light: #ddc06a;

  --color-background: #faf8f4;
  --color-background-alt: #f3f0ea;
  --color-surface: #ffffff;
  --color-surface-hover: #f7f5f0;

  --color-text: #1a1a1a;
  --color-text-secondary: #5c5c5c;
  --color-text-muted: #8a8a8a;

  --color-border: #e5e0d8;
  --color-border-light: #ece8e0;

  /* Status Colors */
  --color-success: #2d7a4f;
  --color-warning: #c5a044;
  --color-danger: #c0392b;
  --color-info: #2980b9;

  /* Golfer Status Colors */
  --color-active: #2d7a4f;
  --color-cut: #c0392b;
  --color-withdrawn: #7f8c8d;

  /* Status indicator backgrounds (light mode) */
  --color-active-bg: rgba(45, 122, 79, 0.08);
  --color-cut-bg: rgba(192, 57, 43, 0.06);
  --color-withdrawn-bg: rgba(127, 140, 141, 0.08);

  /* Status indicator borders (light mode) */
  --color-active-border: rgba(45, 122, 79, 0.2);
  --color-cut-border: rgba(192, 57, 43, 0.2);
  --color-withdrawn-border: rgba(127, 140, 141, 0.25);

  /* Fantasy Sports Accent Colors */
  --color-accent-gold: #c5a044;
  --color-accent-purple: #6c4f82;
  --color-accent-blue: #34699a;

  /* Rank Colors */
  --color-rank-first: #c5a044;
  --color-rank-second: #b0b0b0;
  --color-rank-third: #a0704e;

  /* ── Typography ── */
  --font-family-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-family-main: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', sans-serif;
  --font-family-monospace: 'SF Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;

  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 2rem;      /* 32px */
  --font-size-4xl: 2.75rem;   /* 44px */

  /* Data font sizes */
  --font-size-data-sm: 0.8125rem;
  --font-size-data-base: 0.875rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ── Spacing ── */
  --spacing-unit: 8px;
  --spacing-xs: calc(var(--spacing-unit) * 0.5);  /* 4px */
  --spacing-sm: var(--spacing-unit);               /* 8px */
  --spacing-md: calc(var(--spacing-unit) * 2);    /* 16px */
  --spacing-lg: calc(var(--spacing-unit) * 3);    /* 24px */
  --spacing-xl: calc(var(--spacing-unit) * 4);    /* 32px */
  --spacing-2xl: calc(var(--spacing-unit) * 6);   /* 48px */
  --spacing-3xl: calc(var(--spacing-unit) * 8);   /* 64px */

  /* Compact Spacing */
  --spacing-compact-xs: 4px;
  --spacing-compact-sm: 8px;
  --spacing-compact-md: 12px;

  /* ── Layout ── */
  --max-width-content: 1280px;
  --max-width-text: 768px;

  --header-height: 72px;
  --footer-height: 48px;

  /* ── Border Radius ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 26, 26, 0.06), 0 1px 3px rgba(26, 26, 26, 0.04);
  --shadow-lg: 0 8px 24px rgba(26, 26, 26, 0.08), 0 2px 6px rgba(26, 26, 26, 0.04);
  --shadow-xl: 0 16px 40px rgba(26, 26, 26, 0.1), 0 4px 12px rgba(26, 26, 26, 0.04);

  /* Card Shadows */
  --shadow-card: 0 1px 4px rgba(26, 26, 26, 0.05), 0 0 0 1px rgba(26, 26, 26, 0.03);
  --shadow-card-hover: 0 8px 24px rgba(26, 26, 26, 0.1), 0 2px 6px rgba(26, 26, 26, 0.04);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Z-Index Layers ── */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ── Light mode (explicit) ── */
[data-theme="light"] {
  /* defaults already set in :root */
}

/* ── Dark mode ── */
[data-theme="dark"] {
  --color-primary: #4a9e6e;
  --color-primary-dark: #1a3a2a;
  --color-primary-light: #6dc08e;

  --color-secondary: #ddc06a;
  --color-secondary-dark: #c5a044;
  --color-secondary-light: #f0d88a;

  --color-background: #0d1117;
  --color-background-alt: #161b22;
  --color-surface: #1c2128;
  --color-surface-hover: #272d36;

  --color-text: #e6e1d8;
  --color-text-secondary: #a8a197;
  --color-text-muted: #7a756c;

  --color-border: #2d333b;
  --color-border-light: #373e47;

  /* Status colors */
  --color-success: #4caf6e;
  --color-warning: #ddc06a;
  --color-danger: #e74c3c;
  --color-info: #5dade2;

  /* Golfer status */
  --color-active: #4caf6e;
  --color-cut: #e74c3c;
  --color-withdrawn: #a8a197;

  /* Status indicator backgrounds */
  --color-active-bg: rgba(76, 175, 110, 0.1);
  --color-cut-bg: rgba(231, 76, 60, 0.1);
  --color-withdrawn-bg: rgba(168, 161, 151, 0.1);

  /* Status indicator borders */
  --color-active-border: rgba(76, 175, 110, 0.3);
  --color-cut-border: rgba(231, 76, 60, 0.3);
  --color-withdrawn-border: rgba(168, 161, 151, 0.3);

  /* Fantasy accent colors */
  --color-accent-gold: #f0d88a;
  --color-accent-purple: #a080c0;
  --color-accent-blue: #5dade2;

  /* Rank Colors */
  --color-rank-first: #f0d88a;
  --color-rank-second: #d0d0d0;
  --color-rank-third: #c8956a;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);

  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* ── Auto dark mode (system preference) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-primary: #4a9e6e;
    --color-primary-dark: #1a3a2a;
    --color-primary-light: #6dc08e;

    --color-secondary: #ddc06a;
    --color-secondary-dark: #c5a044;
    --color-secondary-light: #f0d88a;

    --color-background: #0d1117;
    --color-background-alt: #161b22;
    --color-surface: #1c2128;
    --color-surface-hover: #272d36;

    --color-text: #e6e1d8;
    --color-text-secondary: #a8a197;
    --color-text-muted: #7a756c;

    --color-border: #2d333b;
    --color-border-light: #373e47;

    --color-success: #4caf6e;
    --color-warning: #ddc06a;
    --color-danger: #e74c3c;
    --color-info: #5dade2;

    --color-active: #4caf6e;
    --color-cut: #e74c3c;
    --color-withdrawn: #a8a197;

    --color-accent-gold: #f0d88a;
    --color-accent-purple: #a080c0;
    --color-accent-blue: #5dade2;

    --color-rank-first: #f0d88a;
    --color-rank-second: #d0d0d0;
    --color-rank-third: #c8956a;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);

    --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2);
  }
}