/* Premium Enterprise Theme for Qubi */
/* This file defines a sophisticated visual design system built on Material 3 foundations */

/* ===== MATERIAL 3 COMPONENT RESET ===== */

/* Ensure all Material 3 components inherit proper text rendering */
[class*="md-"],
md-* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  font-feature-settings: 'kern';
}

/* Apply box-sizing reset to Material 3 components */
[class*="md-"],
md-*,
[class*="md-"]::before,
md-*::before,
[class*="md-"]::after,
md-*::after {
  box-sizing: border-box;
}

:root, :host {

  /* ===== QUBI TOKENS ===== */

  /* Shadows */
  --qubi-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --qubi-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --qubi-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --qubi-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Animation Timing */
  --qubi-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --qubi-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --qubi-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Spacing Scale */
  --qubi-spacing-1: 0.25rem;   /* 4px */
  --qubi-spacing-2: 0.5rem;    /* 8px */
  --qubi-spacing-3: 0.75rem;   /* 12px */
  --qubi-spacing-4: 1rem;      /* 16px */
  --qubi-spacing-5: 1.25rem;   /* 20px */
  --qubi-spacing-6: 1.5rem;    /* 24px */
  --qubi-spacing-8: 2rem;      /* 32px */
  --qubi-spacing-10: 2.5rem;   /* 40px */
  --qubi-spacing-12: 3rem;     /* 48px */
  --qubi-spacing-16: 4rem;     /* 64px */
  --qubi-spacing-20: 5rem;     /* 80px */

   /* font families */
  --qubi-typeface-default: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --qubi-typeface-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

  /* qubi font var using MD typescale tokens (to use outside MD components) */

  --qubi-typescale-label-small: var(--md-sys-typescale-label-small-weight) var(--md-sys-typescale-label-small-size) / var(--md-sys-typescale-label-small-line-height) var(--md-sys-typescale-label-small-font);
  --qubi-typescale-label-medium: var(--md-sys-typescale-label-medium-weight) var(--md-sys-typescale-label-medium-size) / var(--md-sys-typescale-label-medium-line-height) var(--md-sys-typescale-label-medium-font);
  --qubi-typescale-label-large: var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size) / var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);

  --qubi-typescale-body-small: var(--md-sys-typescale-body-small-weight) var(--md-sys-typescale-body-small-size) / var(--md-sys-typescale-body-small-line-height) var(--md-sys-typescale-body-small-font);
  --qubi-typescale-body-medium: var(--md-sys-typescale-body-medium-weight) var(--md-sys-typescale-body-medium-size) / var(--md-sys-typescale-body-medium-line-height) var(--md-sys-typescale-body-medium-font);
  --qubi-typescale-body-large: var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size) / var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font);

  --qubi-typescale-title-small: var(--md-sys-typescale-title-small-weight) var(--md-sys-typescale-title-small-size) / var(--md-sys-typescale-title-small-line-height) var(--md-sys-typescale-title-small-font);
  --qubi-typescale-title-medium: var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size) / var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-title-medium-font);
  --qubi-typescale-title-large: var(--md-sys-typescale-title-large-weight) var(--md-sys-typescale-title-large-size) / var(--md-sys-typescale-title-large-line-height) var(--md-sys-typescale-title-large-font);

  --qubi-typescale-headline-small: var(--md-sys-typescale-headline-small-weight) var(--md-sys-typescale-headline-small-size) / var(--md-sys-typescale-headline-small-line-height) var(--md-sys-typescale-headline-small-font);
  --qubi-typescale-headline-medium: var(--md-sys-typescale-headline-medium-weight) var(--md-sys-typescale-headline-medium-size) / var(--md-sys-typescale-headline-medium-line-height) var(--md-sys-typescale-headline-medium-font);
  --qubi-typescale-headline-large: var(--md-sys-typescale-headline-large-weight) var(--md-sys-typescale-headline-large-size) / var(--md-sys-typescale-headline-large-line-height) var(--md-sys-typescale-headline-large-font);

  --qubi-typescale-display-small: var(--md-sys-typescale-display-small-weight) var(--md-sys-typescale-display-small-size) / var(--md-sys-typescale-display-small-line-height) var(--md-sys-typescale-display-small-font);
  --qubi-typescale-display-medium: var(--md-sys-typescale-display-medium-weight) var(--md-sys-typescale-display-medium-size) / var(--md-sys-typescale-display-medium-line-height) var(--md-sys-typescale-display-medium-font);
  --qubi-typescale-display-large: var(--md-sys-typescale-display-large-weight) var(--md-sys-typescale-display-large-size) / var(--md-sys-typescale-display-large-line-height) var(--md-sys-typescale-display-large-font);

  /* ===== MATERIAL 3 TOKENS ===== */

  /* Shape System */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large:16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* font families */
  --md-ref-typeface-plain: var(--qubi-typeface-default);
  --md-ref-typeface-brand: var(--qubi-typeface-default);

  /* Typescales */
  --md-sys-typescale-display-small-weight: 400;
  --md-sys-typescale-display-small-size: 2.25rem;
  --md-sys-typescale-display-small-line-height: 2.75rem;

  --md-sys-typescale-display-medium-weight: 400;
  --md-sys-typescale-display-medium-size: 2.8125rem;
  --md-sys-typescale-display-medium-line-height: 3.25rem;
  --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);

  --md-sys-typescale-display-large-weight: 400;
  --md-sys-typescale-display-large-size: 3.5625rem;
  --md-sys-typescale-display-large-line-height: 4rem;
  --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);

  --md-sys-typescale-headline-small-weight: 400;
  --md-sys-typescale-headline-small-size: 1.5rem;
  --md-sys-typescale-headline-small-line-height: 2rem;
  --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);

  --md-sys-typescale-headline-medium-weight: 400;
  --md-sys-typescale-headline-medium-size: 1.75rem;
  --md-sys-typescale-headline-medium-line-height: 2.25rem;
  --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);

  --md-sys-typescale-headline-large-weight: 400;
  --md-sys-typescale-headline-large-size: 2rem;
  --md-sys-typescale-headline-large-line-height: 2.5rem;
  --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);

  --md-sys-typescale-title-small-weight: 500;
  --md-sys-typescale-title-small-size: 0.875rem;
  --md-sys-typescale-title-small-line-height: 1.25rem;
  --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);

  --md-sys-typescale-title-medium-weight: 500;
  --md-sys-typescale-title-medium-size: 1rem;
  --md-sys-typescale-title-medium-line-height: 1.5rem;
  --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);

  --md-sys-typescale-title-large-weight: 400;
  --md-sys-typescale-title-large-size: 1.375rem;
  --md-sys-typescale-title-large-line-height: 1.75rem;
  --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);

  --md-sys-typescale-body-small-weight: 400;
  --md-sys-typescale-body-small-size: 0.75rem;
  --md-sys-typescale-body-small-line-height: 1rem;
  --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);

  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-body-medium-size: 0.875rem;
  --md-sys-typescale-body-medium-line-height: 1.25rem;
  --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);

  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-size: 1rem;
  --md-sys-typescale-body-large-line-height: 1.5rem;
  --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);

  --md-sys-typescale-label-small-weight: 500;
  --md-sys-typescale-label-small-size: 0.6875rem;
  --md-sys-typescale-label-small-line-height: 1rem;
  --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);

  --md-sys-typescale-label-medium-weight: 500;
  --md-sys-typescale-label-medium-size: 0.75rem;
  --md-sys-typescale-label-medium-line-height: 1rem;
  --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);

  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-size: 0.875rem;
  --md-sys-typescale-label-large-line-height: 1.25rem;
  --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);

  /* Qubi theme */

  --md-sys-color-background:#fff;
  --md-sys-color-on-background:#2d3d3d;

  --md-sys-color-surface:#fff;
  --md-sys-color-surface-dim:#ddd9d9;
  --md-sys-color-surface-bright:#fcf8f8;

  --md-sys-color-surface-container-lowest:#ffffff;
  --md-sys-color-surface-container-low:#f0f4f4;/*#f7f9f9*/
  --md-sys-color-surface-container: #f0f4f4;/*#f7f9f9*/
  --md-sys-color-surface-container-high:#EDEFEF;/*#f0f4f4;/*#f7f9f9*/
  --md-sys-color-surface-container-highest:#dce3e3;

  --md-sys-color-on-surface:#2d3d3d;
  --md-sys-color-surface-variant:#fff;
  --md-sys-color-on-surface-variant: #747c7c;
  --md-sys-color-inverse-surface:#313030;
  --md-sys-color-inverse-on-surface:#f4f0ef;

  --md-sys-color-outline:#99a9a9;
  --md-sys-color-outline-variant:#cedcdc;

  --md-sys-color-shadow:#000000;
  --md-sys-color-scrim:#000000;
  --md-sys-color-surface-tint:#5d5f5f;

  --md-sys-color-primary:#133;
  --md-sys-color-on-primary:#ffffff;
  --md-sys-color-primary-container:#ffffff;
  --md-sys-color-on-primary-container:#575859;
  --md-sys-color-inverse-primary:#c6c6c7;

  --md-sys-color-secondary:#999;
  --md-sys-color-on-secondary:#ffffff;
  --md-sys-color-secondary-container:#dce3e3;
  --md-sys-color-on-secondary-container:#2d2d2d;

  --md-sys-color-tertiary:#5d5f5f;
  --md-sys-color-on-tertiary:#ffffff;
  --md-sys-color-tertiary-container:#ffffff;
  --md-sys-color-on-tertiary-container:#575859;

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

  /* custom colors (not used in md components) */
  --md-custom-color-success: rgb(16, 185, 129);
  --md-custom-color-success-container: rgba(16, 185, 129, 0.1);
  --md-custom-color-warning: #f59e0b;
  --md-custom-color-warning-container: rgba(245, 158, 11, 0.1);
  --md-custom-color-info: #3b82f6;
  --md-custom-color-info-container: rgba(59, 130, 246, 0.1);

    /* Dev theme *//*

  --md-sys-color-background:#fff8f6;
  --md-sys-color-on-background:#241914;

  --md-sys-color-surface:#fff8f6;
  --md-sys-color-surface-dim:#ead6cd;
  --md-sys-color-surface-bright:#fff8f6;

  --md-sys-color-surface-container-lowest:#ffffff;
  --md-sys-color-surface-container-low:#fff1eb;
  --md-sys-color-surface-container:#ffeae1;
  --md-sys-color-surface-container-high:#f9e4db;
  --md-sys-color-surface-container-highest:#f3ded6;

  --md-sys-color-on-surface: #241914;
  --md-sys-color-surface-variant: #fbdccf;
  --md-sys-color-on-surface-variant: #564239;
  --md-sys-color-inverse-surface:#3a2e28;
  --md-sys-color-inverse-on-surface:#ffede6;

  --md-sys-color-outline:#8a7267;
  --md-sys-color-outline-variant:#ddc1b4;

  --md-sys-color-shadow:#000000;
  --md-sys-color-scrim:#000000;
  --md-sys-color-surface-tint:#9e4300;

  --md-sys-color-primary:#860000;
  --md-sys-color-on-primary:#ffffff;
  --md-sys-color-primary-container:#bc5613;
  --md-sys-color-on-primary-container:#ffffff;

  --md-sys-color-inverse-primary:#ffb691;

  --md-sys-color-secondary:#865136;
  --md-sys-color-on-secondary:#ffffff;
  --md-sys-color-secondary-container:#ffc3a5;
  --md-sys-color-on-secondary-container:#5d3117;

  --md-sys-color-tertiary:#656100;
  --md-sys-color-on-tertiary:#ffffff;
  --md-sys-color-tertiary-container:#b4af49;
  --md-sys-color-on-tertiary-container:#232200;

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


  /* Component Specific Overrides */
  --md-dialog-container-shape: var(--md-sys-shape-corner-large);
  --md-dialog-container-color: var(--md-sys-color-surface);

  --md-filter-chip-container-shape: var(--md-sys-shape-corner-full);



  /* Responsive Design Helpers */
  /*@media (max-width: 768px) {
    :root {
      --md-sys-spacing-4: 0.75rem;
      --md-sys-spacing-6: 1rem;
      --md-sys-spacing-8: 1.5rem;
    }
  }*/
}