/**
 * Material 3 Expressive Unified Theme Colors
 * Saqib Cipher Portfolio & SketchX Apps
 */

:root {
  /* Material 3 Light Mode Tokens */
  --md-sys-color-primary: #006399;
  --md-sys-color-surface-tint: #006399;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #cbe6ff;
  --md-sys-color-on-primary-container: #001e32;
  
  --md-sys-color-secondary: #51606f;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d4e4f6;
  --md-sys-color-on-secondary-container: #0d1d2a;
  
  --md-sys-color-tertiary: #67587a;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #eedcff;
  --md-sys-color-on-tertiary-container: #221533;

  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;

  --md-sys-color-background: #f8f9ff;
  --md-sys-color-on-background: #191c20;
  --md-sys-color-surface: #f8f9ff;
  --md-sys-color-on-surface: #191c20;
  --md-sys-color-surface-variant: #dee3eb;
  --md-sys-color-on-surface-variant: #42474e;
  --md-sys-color-outline: #72777f;
  --md-sys-color-outline-variant: #c2c7cf;

  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-inverse-surface: #2e3135;
  --md-sys-color-inverse-on-surface: #f0f0f7;
  --md-sys-color-inverse-primary: #8ecdff;

  --md-sys-color-surface-dim: #d8dae0;
  --md-sys-color-surface-bright: #f8f9ff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f2f3fa;
  --md-sys-color-surface-container: #eceef4;
  --md-sys-color-surface-container-high: #e6e8ee;
  --md-sys-color-surface-container-highest: #e0e2e8;

  --md-sys-color-success: #198754;
  --md-sys-color-success-container: #d1e7dd;
  --md-sys-color-on-success-container: #0f5132;

  --md-sys-color-warning: #b26a00;
  --md-sys-color-warning-container: #ffdf99;
  --md-sys-color-on-warning-container: #2e1700;

  /* Expressive Shapes */
  --shape-full: 9999px;
  --shape-extra-large: 28px;
  --shape-large: 20px;
  --shape-medium: 14px;
  --shape-small: 8px;

  /* Typography */
  --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', monospace;

  /* Expressive Elevation & Shadows */
  --elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
  --elevation-2: 0 2px 6px 2px rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
  --elevation-3: 0 4px 12px 3px rgba(0, 0, 0, 0.08), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
  --elevation-4: 0 8px 24px 4px rgba(0, 0, 0, 0.1), 0 2px 6px 0 rgba(0, 0, 0, 0.15);

  /* Legacy Aliases */
  --main-bg: var(--md-sys-color-background);
  --body-text: var(--md-sys-color-on-background);
  --sec-text: var(--md-sys-color-on-surface-variant);
  --atv-btn: var(--md-sys-color-primary-container);
  --atv-btn-text: var(--md-sys-color-on-primary-container);
  --primary: var(--md-sys-color-primary);
  --cardBg: var(--md-sys-color-surface-container);
  --outline: var(--md-sys-color-outline);
}

/* System Dark Preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-sys-color-primary: #8ecdff;
    --md-sys-color-surface-tint: #8ecdff;
    --md-sys-color-on-primary: #003453;
    --md-sys-color-primary-container: #004b75;
    --md-sys-color-on-primary-container: #cbe6ff;

    --md-sys-color-secondary: #b8c8d9;
    --md-sys-color-on-secondary: #23323f;
    --md-sys-color-secondary-container: #263545;
    --md-sys-color-on-secondary-container: #d4e4f6;

    --md-sys-color-tertiary: #d2bfe7;
    --md-sys-color-on-tertiary: #382a4a;
    --md-sys-color-tertiary-container: #4f4061;
    --md-sys-color-on-tertiary-container: #eedcff;

    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;

    --md-sys-color-background: #101418;
    --md-sys-color-on-background: #e0e2e8;
    --md-sys-color-surface: #101418;
    --md-sys-color-on-surface: #e0e2e8;
    --md-sys-color-surface-variant: #42474e;
    --md-sys-color-on-surface-variant: #c2c7cf;
    --md-sys-color-outline: #8c9199;
    --md-sys-color-outline-variant: #42474e;

    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;
    --md-sys-color-inverse-surface: #e0e2e8;
    --md-sys-color-inverse-on-surface: #2e3135;
    --md-sys-color-inverse-primary: #006399;

    --md-sys-color-surface-dim: #101418;
    --md-sys-color-surface-bright: #36393e;
    --md-sys-color-surface-container-lowest: #0b0f12;
    --md-sys-color-surface-container-low: #191c20;
    --md-sys-color-surface-container: #1d2024;
    --md-sys-color-surface-container-high: #272a2f;
    --md-sys-color-surface-container-highest: #32353a;

    --md-sys-color-success: #75dc9e;
    --md-sys-color-success-container: #0a4d2c;
    --md-sys-color-on-success-container: #b3f4cf;

    --md-sys-color-warning: #ffb951;
    --md-sys-color-warning-container: #5d3600;
    --md-sys-color-on-warning-container: #ffddb3;

    --elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --elevation-2: 0 2px 6px 2px rgba(0, 0, 0, 0.45), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --elevation-3: 0 4px 12px 3px rgba(0, 0, 0, 0.5), 0 1px 3px 0 rgba(0, 0, 0, 0.35);
    --elevation-4: 0 8px 24px 4px rgba(0, 0, 0, 0.55), 0 2px 6px 0 rgba(0, 0, 0, 0.4);
  }
}

/* Explicit Light Theme */
[data-theme="light"],
.light {
  --md-sys-color-primary: #006399;
  --md-sys-color-surface-tint: #006399;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #cbe6ff;
  --md-sys-color-on-primary-container: #001e32;
  
  --md-sys-color-secondary: #51606f;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d4e4f6;
  --md-sys-color-on-secondary-container: #0d1d2a;
  
  --md-sys-color-tertiary: #67587a;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #eedcff;
  --md-sys-color-on-tertiary-container: #221533;

  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;

  --md-sys-color-background: #f8f9ff;
  --md-sys-color-on-background: #191c20;
  --md-sys-color-surface: #f8f9ff;
  --md-sys-color-on-surface: #191c20;
  --md-sys-color-surface-variant: #dee3eb;
  --md-sys-color-on-surface-variant: #42474e;
  --md-sys-color-outline: #72777f;
  --md-sys-color-outline-variant: #c2c7cf;

  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f2f3fa;
  --md-sys-color-surface-container: #eceef4;
  --md-sys-color-surface-container-high: #e6e8ee;
  --md-sys-color-surface-container-highest: #e0e2e8;

  --md-sys-color-success: #198754;
  --md-sys-color-success-container: #d1e7dd;
  --md-sys-color-on-success-container: #0f5132;

  --md-sys-color-warning: #b26a00;
  --md-sys-color-warning-container: #ffdf99;
  --md-sys-color-on-warning-container: #2e1700;
}

/* Explicit Dark Theme */
[data-theme="dark"],
.dark {
  --md-sys-color-primary: #8ecdff;
  --md-sys-color-surface-tint: #8ecdff;
  --md-sys-color-on-primary: #003453;
  --md-sys-color-primary-container: #004b75;
  --md-sys-color-on-primary-container: #cbe6ff;

  --md-sys-color-secondary: #b8c8d9;
  --md-sys-color-on-secondary: #23323f;
  --md-sys-color-secondary-container: #263545;
  --md-sys-color-on-secondary-container: #d4e4f6;

  --md-sys-color-tertiary: #d2bfe7;
  --md-sys-color-on-tertiary: #382a4a;
  --md-sys-color-tertiary-container: #4f4061;
  --md-sys-color-on-tertiary-container: #eedcff;

  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;

  --md-sys-color-background: #101418;
  --md-sys-color-on-background: #e0e2e8;
  --md-sys-color-surface: #101418;
  --md-sys-color-on-surface: #e0e2e8;
  --md-sys-color-surface-variant: #42474e;
  --md-sys-color-on-surface-variant: #c2c7cf;
  --md-sys-color-outline: #8c9199;
  --md-sys-color-outline-variant: #42474e;

  --md-sys-color-surface-container-lowest: #0b0f12;
  --md-sys-color-surface-container-low: #191c20;
  --md-sys-color-surface-container: #1d2024;
  --md-sys-color-surface-container-high: #272a2f;
  --md-sys-color-surface-container-highest: #32353a;

  --md-sys-color-success: #75dc9e;
  --md-sys-color-success-container: #0a4d2c;
  --md-sys-color-on-success-container: #b3f4cf;

  --md-sys-color-warning: #ffb951;
  --md-sys-color-warning-container: #5d3600;
  --md-sys-color-on-warning-container: #ffddb3;
}

/* App Icon with dynamic currentColor tint matching button text */
.btn-app-icon-img {
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: url('../images/ic_app_logo.svg') no-repeat center / contain;
    mask: url('../images/ic_app_logo.svg') no-repeat center / contain;
    flex-shrink: 0;
}

img.btn-app-icon-img {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E");
}