/* ================================== */
/* Blog Theme Color Definitions      */
/* ================================== */

/* This file contains ONLY color palette and design token definitions.
   All component styling and layout is in blogs.css.
   Typography within post content is in lexxy-typography.css. */

/* ============================= */
/* Global Design Tokens          */
/* ============================= */

:root {
  /* Typography */
  --font-sans: InterVariable, sans-serif;
  --font-serif: 'Lora Variable', Georgia, serif;
  --font-source-serif: 'SourceSerif4Variable', Georgia, serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Content width options */
  --content-width-narrow: 28rem;   /* container-md */
  --content-width-standard: 36rem; /* container-xl */
  --content-width-wide: 48rem;     /* container-3xl */

  /* Font size scale factors */
  --font-size-standard: 1rem;
  --font-size-large: 1.125rem;
  --font-size-xl: 1.25rem;

  /* Pagecord accent color */
  --color-pagecord-accent: hsl(162, 54%, 57%); /* #56cda9 */
}

/* ============================================ */
/* Shared Color Derivation System             */
/* ============================================ */
/* This applies to all themes that set --theme-bg, --theme-text, --theme-accent */

[data-theme] {
  /* Default base colors (can be overridden by specific themes) */
  --theme-bg: #ffffff;
  --theme-text: #334155;
  --theme-accent: #334155;

  /* === Backgrounds === */
  --color-bg: var(--theme-bg);
  --color-bg-subtle: color-mix(in oklch, var(--theme-bg) 95%, var(--theme-text) 5%);
  --color-bg-elevated: color-mix(in oklch, var(--theme-bg) 90%, var(--theme-text) 10%);
  --color-bg-sunken: color-mix(in oklch, var(--theme-bg) 85%, var(--theme-text) 15%);
  --color-bg-inverted: color-mix(in oklch, var(--theme-text) 100%, var(--theme-bg) 0%);

  /* === Text === */
  --color-text: var(--theme-text);
  --color-text-heading: var(--theme-text);
  --color-text-muted: color-mix(in oklch, var(--theme-text) 60%, var(--theme-bg) 40%);
  --color-text-light: color-mix(in oklch, var(--theme-text) 40%, var(--theme-bg) 60%);
  --color-text-disabled: color-mix(in oklch, var(--theme-text) 20%, var(--theme-bg) 80%);
  --color-text-inverted: var(--theme-bg);

  /* === Accent === */
  --color-accent: var(--theme-accent);
  --color-accent-hover: color-mix(in oklch, var(--theme-accent) 70%, black 30%);
  --color-accent-muted: color-mix(in oklch, var(--theme-accent) 50%, var(--theme-bg) 50%);

  /* === Borders & UI === */
  --color-border: color-mix(in oklch, var(--theme-bg) 85%, var(--theme-text) 15%);
  --color-border-strong: color-mix(in oklch, var(--theme-bg) 65%, var(--theme-text) 35%);
  --color-focus: color-mix(in oklch, var(--theme-accent) 50%, transparent 50%);
  --color-shadow: color-mix(in oklch, var(--theme-text) 30%, transparent 70%);

  /* === Forms === */
  --color-input-bg: white;
  --color-input-border: var(--color-border);
  --color-input-focus: color-mix(in oklch, var(--theme-accent) 50%, transparent 50%);
  --color-button-bg: color-mix(in oklch, var(--theme-bg) 50%, var(--theme-text) 50%);
  --color-button-hover: color-mix(in oklch, var(--theme-bg) 40%, var(--theme-text) 60%);
  --color-button-text: var(--theme-bg);
  --color-placeholder: var(--color-text-light);
}

/* ============================= */
/* Dark Mode Adjustments         */
/* ============================= */

@media (prefers-color-scheme: dark) {
  [data-theme] {
    /* Invert the mixing ratios for dark mode */
    --color-bg-subtle: color-mix(in oklch, var(--theme-bg) 90%, white 10%);
    --color-bg-elevated: color-mix(in oklch, var(--theme-bg) 85%, white 15%);
    --color-bg-sunken: color-mix(in oklch, var(--theme-bg) 80%, black 20%);

    /* Text mixings stay similar but heading gets brighter */
    --color-text-heading: color-mix(in oklch, var(--theme-text) 100%, white 5%);

    /* Accent gets slightly lighter on hover in dark mode */
    --color-accent-hover: color-mix(in oklch, var(--theme-accent) 70%, white 30%);

    /* Borders are lighter in dark mode */
    --color-border: color-mix(in oklch, var(--theme-bg) 70%, white 30%);
    --color-border-strong: color-mix(in oklch, var(--theme-bg) 50%, white 50%);

    /* Forms - darker input in dark mode */
    --color-input-bg: var(--theme-bg);
  }
}

/* ============================= */
/* Base Theme (Override default) */
/* ============================= */
/* The "base" theme uses Tailwind slate colors - defined manually for precision */

[data-theme="base"] {
  /* Override the base colors */
  --theme-bg: #ffffff;
  --theme-text: #334155;
  --theme-accent: #334155;

  /* Manual overrides for precise Tailwind colors */
  --color-bg-subtle: #f1f5f9;      /* slate-100 */
  --color-bg-elevated: #e2e8f0;    /* slate-200 */
  --color-bg-sunken: #cbd5e1;      /* slate-300 */

  --color-text-heading: #0f172a;   /* slate-900 */
  --color-text-muted: #64748b;     /* slate-500 */
  --color-text-light: #94a3b8;     /* slate-400 */
  --color-text-disabled: #cbd5e1;  /* slate-300 */

  --color-accent-hover: #1e293b;   /* slate-800 */
  --color-accent-muted: #94a3b8;   /* slate-400 */

  --color-border: #e2e8f0;         /* slate-200 */
  --color-border-strong: #64748b;  /* slate-500 */

  --color-button-bg: #475569;      /* slate-600 */
  --color-button-hover: #64748b;   /* slate-500 */
  --color-button-text: #f1f5f9;    /* slate-100 */
}

@media (prefers-color-scheme: dark) {
  [data-theme="base"] {
    --theme-bg: #0f172a;           /* slate-900 */
    --theme-text: #cbd5e1;         /* slate-300 */
    --theme-accent: #ffffff;

    --color-bg-subtle: #1e293b;    /* slate-800 */
    --color-bg-elevated: #334155;  /* slate-700 */
    --color-bg-sunken: #475569;    /* slate-600 */

    --color-text-heading: #f1f5f9; /* slate-100 */
    --color-text-muted: #94a3b8;   /* slate-400 */
    --color-text-light: #64748b;   /* slate-500 */
    --color-text-disabled: #475569;/* slate-600 */

    --color-accent-hover: #e2e8f0; /* slate-200 */
    --color-accent-muted: #475569; /* slate-600 */

    --color-border: #475569;       /* slate-600 */
    --color-border-strong: #64748b;/* slate-500 */

    --color-button-bg: #475569;    /* slate-600 */
    --color-button-hover: #64748b; /* slate-500 */
    --color-button-text: #e2e8f0;  /* slate-200 */
  }
}

/* ============================= */
/* Color Themes                  */
/* ============================= */
/* Each theme only needs to set 3 base colors - everything else is derived! */

[data-theme="mint"] {
  --theme-bg: oklch(0.98 0.0175 120);
  --theme-text: oklch(0.25 0 0);
  --theme-accent: oklch(0.55 0.12 220);
}

@media (prefers-color-scheme: dark) {
  [data-theme="mint"] {
    --theme-bg: oklch(0.19 0.02 140);
    --theme-text: oklch(0.90 0 0);
    --theme-accent: oklch(0.60 0.12 220);
  }
}

[data-theme="lavender"] {
  --theme-bg: oklch(0.98 0.0175 300);
  --theme-text: oklch(0.25 0 0);
  --theme-accent: oklch(0.55 0.12 0);
}

@media (prefers-color-scheme: dark) {
  [data-theme="lavender"] {
    --theme-bg: oklch(0.17 0.0175 300);
    --theme-text: oklch(0.90 0 0);
    --theme-accent: oklch(0.60 0.12 0);
  }
}

[data-theme="coral"] {
  --theme-bg: oklch(0.96 0.035 6);
  --theme-text: oklch(0.25 0 0);
  --theme-accent: oklch(0.55 0.12 326);
}

@media (prefers-color-scheme: dark) {
  [data-theme="coral"] {
    --theme-bg: oklch(0.19 0.04 6);
    --theme-text: oklch(0.90 0 0);
    --theme-accent: oklch(0.60 0.12 326);
  }
}

[data-theme="sand"] {
  --theme-bg: oklch(0.97 0.015 75);
  --theme-text: oklch(0.25 0 0);
  --theme-accent: oklch(0.55 0.12 25);
}

@media (prefers-color-scheme: dark) {
  [data-theme="sand"] {
    --theme-bg: oklch(0.18 0.01 100);
    --theme-text: oklch(0.90 0 0);
    --theme-accent: oklch(0.60 0.12 50);
  }
}

[data-theme="sky"] {
  --theme-bg: oklch(0.98 0.0125 210);
  --theme-text: oklch(0.25 0 0);
  --theme-accent: oklch(0.55 0.12 250);
}

@media (prefers-color-scheme: dark) {
  [data-theme="sky"] {
    --theme-bg: oklch(0.17 0.0125 240);
    --theme-text: oklch(0.90 0 0);
    --theme-accent: oklch(0.60 0.12 280);
  }
}

[data-theme="berry"] {
  --theme-bg: oklch(0.97 0.03 330);
  --theme-text: oklch(0.25 0 0);
  --theme-accent: oklch(0.55 0.12 20);
}

@media (prefers-color-scheme: dark) {
  [data-theme="berry"] {
    --theme-bg: oklch(0.19 0.05 330);
    --theme-text: oklch(0.90 0 0);
    --theme-accent: oklch(0.60 0.12 20);
  }
}