/* css/colors.css */

/* ============================
   Default scheme: DARK
   ============================ */

:root {
  /* General page */
  --color-page-bg: #050505;
  --color-page-text: #f5f5f5;

  /* Header */
  --color-header-bg: #151515;
  --color-header-border: #333333;
  --color-header-text: #f5f5f5;

  /* Grid area (padding + gaps) */
  --color-grid-area-bg: #020617;

  /* Cells */
  --color-cell-bg: #1f2937;
  --color-cell-text: #e5e7eb;
  --color-cell-radius: 4px;

  /* Cell hover */
  --color-cell-hover-bg: #3b82f6;
  --color-cell-hover-text: #ffffff;
}

/* ============================
   LIGHT scheme
   ============================ */

:root[data-theme="light"],
body[data-theme="light"] {
  --color-page-bg: #f4f5f7;
  --color-page-text: #111111;

  --color-header-bg: #ffffff;
  --color-header-border: #d0d4dc;
  --color-header-text: #111111;

  --color-grid-area-bg: #e5e9f2;

  --color-cell-bg: #ffffff;
  --color-cell-text: #111827;
  --color-cell-radius: 4px;

  --color-cell-hover-bg: #2563eb;
  --color-cell-hover-text: #ffffff;
}

/* ============================
   MODERN scheme
   (bold + colorful, clearly distinct from LIGHT)
   ============================ */

:root[data-theme="modern"],
body[data-theme="modern"] {
  /* General page: warm, colorful background */
  --color-page-bg: #fff4e6;        /* warm peach */
  --color-page-text: #1f2937;      /* slate-800 */

  /* Header: SAME as hover color */
  --color-header-bg: #06b6d4;      /* cyan (matches hover) */
  --color-header-border: #fb7185;  /* bright pink */
  --color-header-text: #0b1120;    /* deep navy for contrast */

  /* Grid area */
  --color-grid-area-bg: #d1fae5;   /* mint */

  /* Cells */
  --color-cell-bg: #fff7cc;        /* soft warm yellow */
  --color-cell-text: #111827;      /* near-black */
  --color-cell-radius: 14px;

  /* Cell hover */
  --color-cell-hover-bg: #06b6d4;  /* cyan */
  --color-cell-hover-text: #0b1120;

  /* Optional accent palette (Google colors) */
  --color-accent-blue:   #4285F4;
  --color-accent-green:  #34A853;
  --color-accent-yellow: #FBBC05;
  --color-accent-red:    #EA4335;

  /* Useful semantic accents */
  --color-ok:   #34A853;
  --color-warn: #FBBC05;
  --color-bad:  #EA4335;

  /* Extra surfaces (optional) */
  --color-surface-1: #fff7cc;      /* cards */
  --color-surface-2: #d1fae5;      /* panels */
  --color-surface-3: #dcfce7;      /* success tint */
  --color-surface-4: #fef3c7;      /* warning tint */
  --color-surface-5: #ffe4e6;      /* error tint */
}