/* ==========================================================================
   4UTOFFICE Design System — Google Material Design inspired
   Clean, light, professional — Google Workspace aesthetic
   ========================================================================== */

:root {
  /* ── Google Colors ───────────────────────────────────────────────────── */
  --color-primary:           #1967d2;   /* Google Blue (texto/ícone) — 5,09:1 em #f8f9fa, 5,37 em branco; sólido de botão em --color-primary-solid */
  --color-primary-light:     #4285f4;
  --color-primary-dark:      #1557b0;
  --color-primary-surface:   #e8f0fe;

  --color-secondary:         #34a853;   /* Google Green */
  --color-secondary-light:   #5bb974;
  --color-secondary-dark:    #1e8e3e;

  --color-success:           #34a853;
  --color-success-light:     #5bb974;
  --color-success-dark:      #1e8e3e;

  --color-danger:            #ea4335;   /* Google Red */
  --color-error:             #ea4335;
  --color-danger-surface:    #fce8e6;

  --color-warning:           #f9ab00;   /* Google Amber */
  --color-warning-light:     #fdd663;
  --color-warning-dark:      #e37400;
  --color-warning-surface:   #fef7e0;

  --color-purple:            #9334e6;
  --color-info:              #1967d2;

  /* ── Sólidos (fundo com texto branco) e texto semântico — AA ≥ 4,5:1 ── */
  --color-primary-solid:        #1a73e8;   /* branco 4,51:1 */
  --color-primary-solid-hover:  #1557b0;   /* branco 6,95:1 */
  --color-success-solid:        #188038;   /* branco 5,02:1 */
  --color-success-solid-hover:  #146c2e;
  --color-danger-solid:         #c5221f;   /* branco 5,80:1 */
  --color-danger-solid-hover:   #a50e0e;
  --color-warning-solid:        #b06000;   /* branco 4,65:1 */
  --color-success-text:         #188038;   /* em branco 5,02:1 */
  --color-danger-text:          #c5221f;   /* em branco 5,80:1 */
  --color-warning-text:         #b06000;   /* em branco 4,65:1 */
  --color-error-dark:           #c5221f;
  --color-focus-ring:           #1a73e8;   /* em branco 4,51:1 */

  /* ── Backgrounds (Google Workspace) ─────────────────────────────────── */
  --color-bg:                #f8f9fa;
  --color-bg-secondary:      #f1f3f4;
  --color-card:              #ffffff;
  --color-card-hover:        #fafafa;
  --color-border:            #dadce0;
  --color-border-light:      #f1f3f4;
  --color-divider:           #e8eaed;

  /* ── Sidebar (white, Google Drive style) ────────────────────────────── */
  --color-sidebar-bg:        #ffffff;
  --color-sidebar-text:      #444746;
  --color-sidebar-muted:     #5f6368;
  --color-sidebar-active-bg: #d3e3fd;
  --color-sidebar-active:    #0b57d0;
  --color-sidebar-hover:     #f1f3f4;
  --color-sidebar-border:    #dadce0;
  --color-sidebar-section:   #5f6368;
  --color-sidebar-icon:      #444746;

  /* ── Text (Google Material) ─────────────────────────────────────────── */
  --color-text:              #202124;
  --color-text-secondary:    #5f6368;
  --color-text-muted:        #5f6368;   /* 6,05:1 em branco (era #80868b = 3,68) */
  --color-text-inverse:      #ffffff;
  --color-text-link:         #1967d2;

  /* ── Typography ─────────────────────────────────────────────────────── */
  --font-title:              'Poppins', 'Google Sans', sans-serif;
  --font-body:               'Inter', 'Roboto', sans-serif;
  --font-mono:               'JetBrains Mono', monospace;

  --font-size-xs:            0.6875rem;
  --font-size-sm:            0.75rem;
  --font-size-base:          0.875rem;
  --font-size-md:            1rem;
  --font-size-lg:            1.125rem;
  --font-size-xl:            1.25rem;
  --font-size-2xl:           1.5rem;
  --font-size-3xl:           1.875rem;

  --font-weight-normal:      400;
  --font-weight-medium:      500;
  --font-weight-semibold:    600;
  --font-weight-bold:        700;

  --line-height-tight:       1.25;
  --line-height-normal:      1.5;
  --line-height-relaxed:     1.75;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --sidebar-width:           256px;
  --sidebar-collapsed-width: 72px;
  --topbar-height:           64px;
  --content-max-width:       1400px;

  /* ── Spacing ─────────────────────────────────────────────────────────── */
  --spacing-xs:              0.25rem;
  --spacing-sm:              0.5rem;
  --spacing-md:              1rem;
  --spacing-lg:              1.5rem;
  --spacing-xl:              2rem;
  --spacing-2xl:             3rem;

  /* ── Border Radius (Google uses pill shapes for chips, 8px for cards) ── */
  --radius-sm:               4px;
  --radius-md:               8px;
  --radius-lg:               12px;
  --radius-xl:               16px;
  --radius-pill:             24px;
  --radius-full:             9999px;

  /* ── Shadows (Google elevation — very subtle) ────────────────────────── */
  --shadow-sm:               0 1px 2px rgba(60,64,67,.08), 0 1px 3px rgba(60,64,67,.06);
  --shadow-md:               0 1px 3px rgba(60,64,67,.12), 0 4px 8px rgba(60,64,67,.08);
  --shadow-lg:               0 2px 6px rgba(60,64,67,.12), 0 8px 24px rgba(60,64,67,.08);
  --shadow-card:             0 1px 2px rgba(60,64,67,.08);
  --shadow-card-hover:       0 2px 6px rgba(60,64,67,.15), 0 4px 12px rgba(60,64,67,.08);
  --shadow-topbar:           0 1px 3px rgba(60,64,67,.2);
  --shadow-sidebar:          1px 0 0 var(--color-sidebar-border);
  --shadow-xl:               0 8px 24px rgba(60,64,67,.15);

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --transition-fast:         150ms cubic-bezier(0.2, 0, 0, 1);
  --transition-base:         250ms cubic-bezier(0.2, 0, 0, 1);
  --transition-slow:         350ms cubic-bezier(0.2, 0, 0, 1);

  /* ── Z-Index ─────────────────────────────────────────────────────────── */
  --z-dropdown:              100;
  --z-sticky:                200;
  --z-sidebar:               300;
  --z-overlay:               400;
  --z-modal:                 500;
  --z-toast:                 600;
  --z-tooltip:               700;
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */
[data-theme="dark"] {
  --color-bg:                #1c1c1e;
  --color-bg-secondary:      #2c2c2e;
  --color-card:              #2c2c2e;
  --color-card-hover:        #3a3a3c;
  --color-border:            #3a3a3c;
  --color-border-light:      #2c2c2e;
  --color-divider:           #3a3a3c;

  --color-sidebar-bg:        #202124;
  --color-sidebar-text:      #e8eaed;
  --color-sidebar-muted:     #bdc1c6;
  --color-sidebar-active-bg: #1a3a6e;
  --color-sidebar-active:    #8ab4f8;
  --color-sidebar-hover:     #2c2c2e;
  --color-sidebar-border:    #3a3a3c;
  --color-sidebar-section:   #bdc1c6;
  --color-sidebar-icon:      #bdc1c6;

  --color-text:              #e8eaed;
  --color-text-secondary:    #bdc1c6;
  --color-text-muted:        #9aa0a6;

  /* Cores semânticas claras para uso como texto/ícone sobre fundo escuro */
  --color-primary:           #8ab4f8;   /* 6,61:1 em #2c2c2e */
  --color-primary-light:     #aecbfa;
  --color-primary-dark:      #aecbfa;
  --color-text-link:         #8ab4f8;
  --color-info:              #8ab4f8;
  --color-success:           #81c995;   /* 7,12:1 */
  --color-success-dark:      #81c995;
  --color-success-text:      #81c995;
  --color-secondary:         #81c995;
  --color-secondary-dark:    #a8dab5;
  --color-danger:            #f28b82;   /* 5,83:1 */
  --color-error:             #f28b82;
  --color-danger-text:       #f28b82;
  --color-error-dark:        #f28b82;
  --color-warning-text:      #fdd663;
  --color-purple:            #c58af9;   /* 5,56:1 */
  --color-focus-ring:        #8ab4f8;
  --color-primary-surface:   rgba(26,115,232,.22);
  --color-danger-surface:    rgba(234,67,53,.22);
  --color-warning-surface:   rgba(249,171,0,.22);

  /* Bootstrap 5.3 — segue os tokens (data-bs-theme="dark" é sincronizado no JS) */
  --bs-body-bg:              var(--color-bg);
  --bs-body-color:           var(--color-text);
  --bs-emphasis-color:       var(--color-text);
  --bs-secondary-color:      var(--color-text-secondary);
  --bs-secondary-bg:         var(--color-bg-secondary);
  --bs-tertiary-bg:          var(--color-bg-secondary);
  --bs-border-color:         var(--color-border);
  --bs-link-color:           var(--color-text-link);
  --bs-link-hover-color:     var(--color-primary-dark);

  --shadow-card:             0 1px 2px rgba(0,0,0,.3);
  --shadow-topbar:           0 1px 3px rgba(0,0,0,.4);
  --shadow-sidebar:          1px 0 0 #3a3a3c;
}