/**
 * Camille's Lot - Unified Color System
 *
 * Edward Tufte-inspired minimal palette with semantic meaning.
 * All colors are muted, purposeful, and WCAG AA compliant.
 *
 * Philosophy:
 * - Minimal: Only 4 accent colors
 * - Muted: Desaturated earth tones
 * - Purposeful: Each color has semantic meaning
 * - Accessible: High contrast in both light and dark modes
 */

:root {
  /* ========================================
     BASE COLORS (Light Mode)
     ======================================== */

  /* Background & Text */
  --color-bg: #fffff8;           /* Warm cream (Tufte default) */
  --color-text: #111;            /* Near black */
  --color-text-muted: #6b6b6b;   /* Warm gray for secondary text */

  /* Semantic Accent Colors */
  --color-primary: #2c4f6b;      /* Slate blue - Research, publications, headings */
  --color-secondary: #a0522d;    /* Burnt sienna - Tools, interactive elements */
  --color-accent: #8b3a3a;       /* Burgundy - Key findings, emphasis, warnings */
  --color-success: #5a6d5a;      /* Sage green - Positive states, confirmations */

  /* Neutral Grays */
  --color-gray-100: #f5f5f5;     /* Lightest gray */
  --color-gray-200: #e5e5e5;     /* Light gray - borders, dividers */
  --color-gray-300: #d4d4d4;     /* Medium-light gray */
  --color-gray-400: #a3a3a3;     /* Medium gray */
  --color-gray-500: #737373;     /* Dark gray */
  --color-gray-600: #525252;     /* Darker gray */

  /* Link Colors */
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-secondary);

  /* Backgrounds for Cards/Boxes */
  --color-bg-card: #fffbf0;      /* Warm off-white */
  --color-bg-card-alt: #f9f7f4;  /* Slightly darker warm off-white */

  /* Selection highlight */
  --color-selection: #d4e4f7;    /* Muted blue (lighter than Tufte default) */


  /* ========================================
     CODE SYNTAX (Light Mode)
     ======================================== */

  --color-code-bg: #f5f5f5;
  --color-code-text: #111;
  --color-code-comment: #6a9955;
  --color-code-keyword: #2c4f6b;     /* Use primary */
  --color-code-string: #a0522d;      /* Use secondary */
  --color-code-function: #8b3a3a;    /* Use accent */
  --color-code-number: #5a6d5a;      /* Use success */
  --color-code-type: #2c4f6b;
}


/* ========================================
   DARK MODE OVERRIDES
   ======================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Background & Text */
    --color-bg: #151515;         /* Near black (Tufte default) */
    --color-text: #ddd;          /* Light gray */
    --color-text-muted: #aaa;    /* Medium gray */

    /* Semantic Colors (Lightened & Adjusted) */
    --color-primary: #6b9bd9;    /* Lighter slate blue */
    --color-secondary: #d9865a;  /* Lighter burnt sienna */
    --color-accent: #c97a7a;     /* Lighter burgundy */
    --color-success: #7a9d7a;    /* Lighter sage green */

    /* Neutral Grays (Inverted) */
    --color-gray-100: #2a2a2a;   /* Darkest gray */
    --color-gray-200: #333;      /* Dark gray - borders, dividers */
    --color-gray-300: #444;      /* Medium-dark gray */
    --color-gray-400: #666;      /* Medium gray */
    --color-gray-500: #888;      /* Light-medium gray */
    --color-gray-600: #aaa;      /* Light gray */

    /* Link Colors */
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-secondary);

    /* Backgrounds for Cards/Boxes */
    --color-bg-card: #1a1a1a;    /* Slightly lighter than main bg */
    --color-bg-card-alt: #222;   /* Even lighter */

    /* Selection highlight */
    --color-selection: #2c4f6b;  /* Darker blue for dark mode */

    /* Code Syntax (Dark Mode) */
    --color-code-bg: #1e1e1e;
    --color-code-text: #d4d4d4;
    --color-code-comment: #6a9955;
    --color-code-keyword: #6b9bd9;
    --color-code-string: #d9865a;
    --color-code-function: #c97a7a;
    --color-code-number: #7a9d7a;
    --color-code-type: #6b9bd9;
  }
}


/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Text Colors */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-muted { color: var(--color-text-muted); }

/* Background Colors */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }
.bg-success { background-color: var(--color-success); }
.bg-card { background-color: var(--color-bg-card); }
.bg-card-alt { background-color: var(--color-bg-card-alt); }

/* Border Colors */
.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }
.border-accent { border-color: var(--color-accent); }
.border-success { border-color: var(--color-success); }
.border-gray { border-color: var(--color-gray-200); }


/* ========================================
   SEMANTIC COMPONENT STYLES
   ======================================== */

/* Publication/Research Cards */
.card-research {
  background: var(--color-bg-card);
  border-left: 4px solid var(--color-primary);
}

/* Tool/Interactive Cards */
.card-tool {
  background: var(--color-bg-card);
  border-left: 4px solid var(--color-secondary);
}

/* Policy/Framework Cards */
.card-policy {
  background: var(--color-bg-card);
  border-left: 4px solid var(--color-accent);
}

/* Success/Confirmation Cards */
.card-success {
  background: var(--color-bg-card);
  border-left: 4px solid var(--color-success);
}

/* Stat Boxes (for publication counts, metrics, etc.) */
.stat-box {
  background: var(--color-bg-card);
  border: 2px solid var(--color-gray-200);
}

/* Feature Boxes (for showcasing features) */
.feature-box {
  background: var(--color-bg-card-alt);
  border: 2px solid var(--color-gray-200);
}

/* Call-to-Action Buttons */
.cta-button,
.btn-primary {
  background: var(--color-primary);
  color: #fffff8;  /* Warm off-white, softer than pure white */
  border: none;
  transition: background 0.2s ease;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.cta-button:hover,
.btn-primary:hover {
  background: var(--color-secondary);
  color: #fffff8;
}

/* Tags/Badges */
.tag-research,
.badge-research {
  background: var(--color-primary);
  color: #fffff8;  /* Warm off-white */
}

.tag-tool,
.badge-tool {
  background: var(--color-secondary);
  color: #fffff8;
}

.tag-policy,
.badge-policy {
  background: var(--color-accent);
  color: #fffff8;
}

/* Emphasis/Warning Text */
.emphasis,
.key-finding {
  color: var(--color-accent);
  font-weight: 600;
}


/* ========================================
   OVERRIDE TUFTE LINK GRADIENTS
   ======================================== */

/* Update the Tufte link underline to use our color system */
a:link,
a:visited {
  color: var(--color-link);
}

a:hover,
a:focus {
  color: var(--color-link-hover);
}

/* Override Tufte's gradient backgrounds for links */
article a:link,
article a:visited {
  background: -webkit-linear-gradient(var(--color-bg), var(--color-bg)),
              -webkit-linear-gradient(var(--color-bg), var(--color-bg)),
              -webkit-linear-gradient(currentColor, currentColor);
  background: linear-gradient(var(--color-bg), var(--color-bg)),
              linear-gradient(var(--color-bg), var(--color-bg)),
              linear-gradient(currentColor, currentColor);
  background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: 0% 93%, 100% 93%, 0% 93%;
}


/* ========================================
   SELECTION HIGHLIGHT
   ======================================== */

::selection {
  background: var(--color-selection);
  color: var(--color-text);
}

::-moz-selection {
  background: var(--color-selection);
  color: var(--color-text);
}


/* ========================================
   CODE BLOCKS
   ======================================== */

code {
  background: var(--color-code-bg);
  color: var(--color-code-text);
}

pre {
  background: var(--color-code-bg);
  border-left: 4px solid var(--color-gray-200);
}

/* Inline code */
p code,
li code {
  background: var(--color-bg-card-alt);
  color: var(--color-text);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}