/* css/tokens.css */
/* Material Design 3 Enterprise Design Token */

:root {
  /* ========================================================================
     COLOR SYSTEM (MD3 Enterprise / Google Cloud Console)
     ======================================================================== */
  /* Background & Surface */
  --md-sys-color-background: #F8F9FA;
  --md-sys-color-surface: #FFFFFF;
  --md-sys-color-surface-container: #F1F3F4;
  --md-sys-color-surface-container-high: #E8EAED;
  --md-sys-color-on-surface: #1F1F1F;
  --md-sys-color-on-surface-variant: #444746;
  
  /* Outline */
  --md-sys-color-outline: #DADCE0;
  --md-sys-color-outline-variant: #C4C7C5;

  /* Primary (Google Workspace Blue) */
  --md-sys-color-primary: #1A73E8;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #D2E3FC;
  --md-sys-color-on-primary-container: #041E49;

  /* Semantic Colors */
  --md-sys-color-success: #188038;
  --md-sys-color-on-success: #FFFFFF;
  --md-sys-color-success-container: #CEEAD6;
  --md-sys-color-on-success-container: #0D652D;

  --md-sys-color-warning: #F9AB00;
  --md-sys-color-on-warning: #FFFFFF;
  --md-sys-color-warning-container: #FEF7E0;
  --md-sys-color-on-warning-container: #E37400;

  --md-sys-color-danger: #D93025;
  --md-sys-color-on-danger: #FFFFFF;
  --md-sys-color-danger-container: #FCE8E6;
  --md-sys-color-on-danger-container: #A50E0E;

  --md-sys-color-info: #4285F4;
  --md-sys-color-on-info: #FFFFFF;

  /* States */
  --md-sys-state-hover: #E8F0FE;
  --md-sys-state-selected: #D2E3FC;
  --md-sys-state-focus: rgba(26, 115, 232, 0.12);
  --md-sys-state-pressed: rgba(26, 115, 232, 0.16);
  --md-sys-state-dragged: rgba(26, 115, 232, 0.16);

  /* ========================================================================
     TYPOGRAPHY (Google Sans & Roboto)
     ======================================================================== */
  --md-sys-typescale-font-title: 'Google Sans', system-ui, -apple-system, sans-serif;
  --md-sys-typescale-font-body: 'Roboto Flex', 'Roboto', system-ui, -apple-system, sans-serif;
  --md-sys-typescale-font-mono: 'Roboto Mono', ui-monospace, monospace;

  --md-sys-typescale-display-large: 400 57px/64px var(--md-sys-typescale-font-title);
  --md-sys-typescale-display-medium: 400 45px/52px var(--md-sys-typescale-font-title);
  --md-sys-typescale-display-small: 400 36px/44px var(--md-sys-typescale-font-title);

  --md-sys-typescale-headline-large: 400 32px/40px var(--md-sys-typescale-font-title);
  --md-sys-typescale-headline-medium: 400 28px/36px var(--md-sys-typescale-font-title);
  --md-sys-typescale-headline-small: 400 24px/32px var(--md-sys-typescale-font-title);

  --md-sys-typescale-title-large: 500 22px/28px var(--md-sys-typescale-font-title);
  --md-sys-typescale-title-medium: 500 16px/24px var(--md-sys-typescale-font-title);
  --md-sys-typescale-title-small: 500 14px/20px var(--md-sys-typescale-font-title);

  --md-sys-typescale-body-large: 400 16px/24px var(--md-sys-typescale-font-body);
  --md-sys-typescale-body-medium: 400 14px/20px var(--md-sys-typescale-font-body);
  --md-sys-typescale-body-small: 400 12px/16px var(--md-sys-typescale-font-body);

  --md-sys-typescale-label-large: 500 14px/20px var(--md-sys-typescale-font-body);
  --md-sys-typescale-label-medium: 500 12px/16px var(--md-sys-typescale-font-body);
  --md-sys-typescale-label-small: 500 11px/16px var(--md-sys-typescale-font-body);

  /* ========================================================================
     SHAPE (Radius)
     ======================================================================== */
  --md-sys-shape-corner-button: 18px;
  --md-sys-shape-corner-input: 16px;
  --md-sys-shape-corner-card: 20px;
  --md-sys-shape-corner-panel: 24px;
  --md-sys-shape-corner-dialog: 28px;
  --md-sys-shape-corner-full: 9999px;
  --md-sys-shape-corner-none: 0px;

  /* ========================================================================
     SPACING SYSTEM (8pt Grid)
     ======================================================================== */
  --md-sys-spacing-0: 0px;
  --md-sys-spacing-1: 4px;
  --md-sys-spacing-2: 8px;
  --md-sys-spacing-3: 12px;
  --md-sys-spacing-4: 16px; /* Inner Padding */
  --md-sys-spacing-5: 20px;
  --md-sys-spacing-6: 24px; /* Page Padding & Gap */
  --md-sys-spacing-8: 32px;
  --md-sys-spacing-10: 40px;
  --md-sys-spacing-12: 48px;

  /* ========================================================================
     MOTION SYSTEM (Material 3)
     ======================================================================== */
  --md-sys-motion-duration-short: 150ms;
  --md-sys-motion-duration-medium: 200ms;
  --md-sys-motion-duration-long: 250ms;

  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --md-sys-motion-easing-decelerate: cubic-bezier(0.0, 0.0, 0.0, 1.0);
  --md-sys-motion-easing-accelerate: cubic-bezier(0.3, 0.0, 1.0, 1.0);

  /* ========================================================================
     ELEVATION SYSTEM (Material 3 Shadows)
     ======================================================================== */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level4: 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level5: 0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);

  /* ========================================================================
     Z-INDEX SYSTEM
     ======================================================================== */
  --md-sys-zindex-base: 1;
  --md-sys-zindex-dropdown: 1000;
  --md-sys-zindex-sticky: 1020;
  --md-sys-zindex-fixed: 1030;
  --md-sys-zindex-drawer-overlay: 1040;
  --md-sys-zindex-drawer: 1050;
  --md-sys-zindex-modal-overlay: 1060;
  --md-sys-zindex-modal: 1070;
  --md-sys-zindex-popover: 1080;
  --md-sys-zindex-tooltip: 1090;
  --md-sys-zindex-snackbar: 1100;
}