/* =========================================================
   BASE THEME
   Foundation color system for all sites and applications

   Rules:
   - Load before any branded themes
   - UI components must only use --color-* tokens
   - Raw tokens and palettes must never be referenced directly
   ========================================================= */


/* ---------------------------------------------------------
   Raw Color Tokens
   Physical color values only
   DO NOT reference directly in UI components
   --------------------------------------------------------- */

:root {
  /* Neutral scale */
  --gray-0:   #ffffff;
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-950: #0b0f19;

  /* Accent primitives */
  --blue-500: #3b82f6;
  --blue-600: #2563eb;

  /* Status primitives */
  --red-500:    #ef4444;
  --green-500:  #22c55e;
  --yellow-500: #eab308;
}


/* ---------------------------------------------------------
   Semantic Palette Definitions
   Single source of truth for light and dark modes
   --------------------------------------------------------- */

:root {
  /* Light palette */
  --light-bg-page:     var(--gray-50);
  --light-bg-surface:  var(--gray-0);
  --light-bg-elevated: var(--gray-0);

  --light-text-primary:   var(--gray-900);
  --light-text-secondary: var(--gray-600);
  --light-text-muted:     var(--gray-500);
  --light-text-inverse:   var(--gray-0);

  --light-border-subtle:  var(--gray-200);
  --light-border-default: var(--gray-300);
  --light-border-strong:  var(--gray-400);

  --light-bg-hover:    var(--gray-100);
  --light-bg-active:   var(--gray-200);
  --light-bg-disabled: var(--gray-200);
  --light-bg-subtle:   var(--gray-100);

  --light-focus-ring: rgba(59, 130, 246, 0.5);

  /* Dark palette */
  --dark-bg-page:     var(--gray-950);
  --dark-bg-surface:  var(--gray-900);
  --dark-bg-elevated: var(--gray-800);

  --dark-text-primary:   var(--gray-100);
  --dark-text-secondary: var(--gray-400);
  --dark-text-muted:     var(--gray-500);
  --dark-text-inverse:   var(--gray-900);

  --dark-border-subtle:  var(--gray-800);
  --dark-border-default: var(--gray-700);
  --dark-border-strong:  var(--gray-600);

  --dark-bg-hover:    var(--gray-800);
  --dark-bg-active:   var(--gray-700);
  --dark-bg-disabled: var(--gray-800);
  --dark-bg-subtle:   var(--gray-800);

  --dark-focus-ring: rgba(59, 130, 246, 0.6);
}


/* ---------------------------------------------------------
   Semantic Token Mapping (Default: Light)
   Components consume ONLY these tokens
   --------------------------------------------------------- */

:root {
  /* Backgrounds */
  --color-bg-page:     var(--light-bg-page);
  --color-bg-surface:  var(--light-bg-surface);
  --color-bg-elevated: var(--light-bg-elevated);

  /* Text */
  --color-text-primary:   var(--light-text-primary);
  --color-text-secondary: var(--light-text-secondary);
  --color-text-muted:     var(--light-text-muted);
  --color-text-inverse:   var(--light-text-inverse);

  /* Borders */
  --color-border-subtle:  var(--light-border-subtle);
  --color-border-default: var(--light-border-default);
  --color-border-strong:  var(--light-border-strong);

  /* Accent */
  --color-accent:       var(--blue-600);
  --color-accent-hover: var(--blue-600);

  /* Status */
  --color-danger:  var(--red-500);
  --color-success: var(--green-500);
  --color-warning: var(--yellow-500);

  /* Interaction surfaces */
  --color-bg-hover:    var(--light-bg-hover);
  --color-bg-active:   var(--light-bg-active);
  --color-bg-disabled: var(--light-bg-disabled);
  --color-bg-subtle:   var(--light-bg-subtle);

  /* Focus */
  --color-focus-ring: var(--light-focus-ring);
}


/* ---------------------------------------------------------
   System Dark Mode Mapping
   Applied only when no explicit theme is set
   --------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-page:     var(--dark-bg-page);
    --color-bg-surface:  var(--dark-bg-surface);
    --color-bg-elevated: var(--dark-bg-elevated);

    --color-text-primary:   var(--dark-text-primary);
    --color-text-secondary: var(--dark-text-secondary);
    --color-text-muted:     var(--dark-text-muted);
    --color-text-inverse:   var(--dark-text-inverse);

    --color-border-subtle:  var(--dark-border-subtle);
    --color-border-default: var(--dark-border-default);
    --color-border-strong:  var(--dark-border-strong);

    --color-bg-hover:    var(--dark-bg-hover);
    --color-bg-active:   var(--dark-bg-active);
    --color-bg-disabled: var(--dark-bg-disabled);
    --color-bg-subtle:   var(--dark-bg-subtle);

    --color-focus-ring: var(--dark-focus-ring);
  }
}


/* ---------------------------------------------------------
   Explicit Theme Overrides (User Selection)
   These always override system preference
   --------------------------------------------------------- */

:root[data-theme="light"] {
  --color-bg-page:     var(--light-bg-page);
  --color-bg-surface:  var(--light-bg-surface);
  --color-bg-elevated: var(--light-bg-elevated);

  --color-text-primary:   var(--light-text-primary);
  --color-text-secondary: var(--light-text-secondary);
  --color-text-muted:     var(--light-text-muted);
  --color-text-inverse:   var(--light-text-inverse);

  --color-border-subtle:  var(--light-border-subtle);
  --color-border-default: var(--light-border-default);
  --color-border-strong:  var(--light-border-strong);

  --color-bg-hover:    var(--light-bg-hover);
  --color-bg-active:   var(--light-bg-active);
  --color-bg-disabled: var(--light-bg-disabled);
  --color-bg-subtle:   var(--light-bg-subtle);

  --color-focus-ring: var(--light-focus-ring);
}

:root[data-theme="dark"] {
  --color-bg-page:     var(--dark-bg-page);
  --color-bg-surface:  var(--dark-bg-surface);
  --color-bg-elevated: var(--dark-bg-elevated);

  --color-text-primary:   var(--dark-text-primary);
  --color-text-secondary: var(--dark-text-secondary);
  --color-text-muted:     var(--dark-text-muted);
  --color-text-inverse:   var(--dark-text-inverse);

  --color-border-subtle:  var(--dark-border-subtle);
  --color-border-default: var(--dark-border-default);
  --color-border-strong:  var(--dark-border-strong);

  --color-bg-hover:    var(--dark-bg-hover);
  --color-bg-active:   var(--dark-bg-active);
  --color-bg-disabled: var(--dark-bg-disabled);
  --color-bg-subtle:   var(--dark-bg-subtle);

  --color-focus-ring: var(--dark-focus-ring);
}


:root[data-theme="light"] {
  --tooltip-bg: #111;
  --tooltip-fg: #fff;
}

:root[data-theme="dark"] {
  --tooltip-bg: #eee;
  --tooltip-fg: #111;
}


/* ---------------------------------------------------------
   Typography Tokens
   --------------------------------------------------------- */

:root {
  --font-body: "Open Sans", system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;

  --font-heading: "Montserrat", system-ui, -apple-system,
                  BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;
				  
  --font-monospace: ui-monospace, SFMono-Regular,
                    Menlo, Monaco, Consolas,
                    "Liberation Mono", "Courier New",
                    monospace;
}