/* ============================================================
   Controla Obra — M3 Design Tokens
   Paleta M3 gerada a partir de #1F3A5F (azul escuro construtivo)
   Inclui Primary, Secondary, Tertiary, Neutral, Error
   Modos: light / dark
   ============================================================ */

:root {
  /* === M3 Reference Palette (tonal) === */
  /* Primary: deep blue (construção, confiança) */
  --m3-primary-0:   #000000;
  --m3-primary-10:  oklch(0.2 0.07 220);
  --m3-primary-20:  oklch(0.28 0.07 220);
  --m3-primary-30:  oklch(0.36 0.07 220);
  --m3-primary-40:  oklch(0.45 0.07 220);
  --m3-primary-50:  oklch(0.55 0.07 220);
  --m3-primary-60:  oklch(0.65 0.07 220);
  --m3-primary-70:  oklch(0.74 0.07 220);
  --m3-primary-80:  oklch(0.83 0.07 220);
  --m3-primary-90:  oklch(0.92 0.07 220);
  --m3-primary-95:  #ECF1FF;
  --m3-primary-99:  #FDFCFF;
  --m3-primary-100: #FFFFFF;

  /* Secondary: warm sand / concrete */
  --m3-secondary-0:   #000000;
  --m3-secondary-10:  #141B26;
  --m3-secondary-20:  #2A303B;
  --m3-secondary-30:  #404652;
  --m3-secondary-40:  #585E6A;
  --m3-secondary-50:  #717784;
  --m3-secondary-60:  #8B919E;
  --m3-secondary-70:  #A6ACB9;
  --m3-secondary-80:  #C2C7D5;
  --m3-secondary-90:  #DEE2F1;
  --m3-secondary-95:  #ECF0FF;
  --m3-secondary-99:  #FDFCFF;
  --m3-secondary-100: #FFFFFF;

  /* Tertiary: terracota (acento "obra") */
  --m3-tertiary-0:   #000000;
  --m3-tertiary-10:  oklch(0.2 0.0665 250);
  --m3-tertiary-20:  oklch(0.28 0.0665 250);
  --m3-tertiary-30:  oklch(0.36 0.0665 250);
  --m3-tertiary-40:  oklch(0.45 0.0665 250);
  --m3-tertiary-50:  oklch(0.55 0.0665 250);
  --m3-tertiary-60:  oklch(0.65 0.0665 250);
  --m3-tertiary-70:  oklch(0.74 0.0665 250);
  --m3-tertiary-80:  oklch(0.83 0.0665 250);
  --m3-tertiary-90:  oklch(0.92 0.0665 250);
  --m3-tertiary-95:  #FFEDE6;
  --m3-tertiary-99:  #FFFBFF;
  --m3-tertiary-100: #FFFFFF;

  /* Neutral */
  --m3-neutral-0:   #000000;
  --m3-neutral-4:   #0B0E11;
  --m3-neutral-6:   #101317;
  --m3-neutral-10:  #1A1C1E;
  --m3-neutral-12:  #1E2023;
  --m3-neutral-17:  #282A2D;
  --m3-neutral-20:  #2F3033;
  --m3-neutral-22:  #333538;
  --m3-neutral-24:  #383A3D;
  --m3-neutral-30:  #45474A;
  --m3-neutral-40:  #5D5E61;
  --m3-neutral-50:  #75777A;
  --m3-neutral-60:  #8F9094;
  --m3-neutral-70:  #AAABAE;
  --m3-neutral-80:  #C5C6CA;
  --m3-neutral-87:  #D9DADD;
  --m3-neutral-90:  #E2E2E5;
  --m3-neutral-92:  #E7E8EB;
  --m3-neutral-94:  #EDEDF0;
  --m3-neutral-95:  #F1F1F4;
  --m3-neutral-96:  #F4F4F7;
  --m3-neutral-98:  #FAFAFD;
  --m3-neutral-99:  #FDFCFF;
  --m3-neutral-100: #FFFFFF;

  /* Neutral Variant */
  --m3-nv-10: #181C20;
  --m3-nv-30: #43474E;
  --m3-nv-50: #74777F;
  --m3-nv-60: #8E9099;
  --m3-nv-80: #C4C6D0;
  --m3-nv-90: #E0E2EC;

  /* Error */
  --m3-error-10:  #410E0B;
  --m3-error-20:  #601410;
  --m3-error-30:  #8C1D18;
  --m3-error-40:  #B3261E;
  --m3-error-50:  #DC362E;
  --m3-error-80:  #F2B8B5;
  --m3-error-90:  #F9DEDC;

  /* Success (custom — M3 não tem mas precisamos para finanças) */
  --m3-success-30: #0F5132;
  --m3-success-40: #1B7A4F;
  --m3-success-50: #2BAF6F;
  --m3-success-80: #A6E9CB;
  --m3-success-90: #D1F5E2;

  /* Warning (custom — pastel âmbar pra "a vencer" / atenção) */
  --m3-warning-30: oklch(0.32 0.10 80);
  --m3-warning-40: oklch(0.45 0.11 80);
  --m3-warning-80: oklch(0.83 0.10 80);
  --m3-warning-90: oklch(0.96 0.045 85);

  /* === Semantic (light) === */
  --primary:                var(--m3-primary-40);
  --on-primary:             var(--m3-primary-100);
  --primary-container:      var(--m3-primary-90);
  --on-primary-container:   var(--m3-primary-10);

  --secondary:              var(--m3-secondary-40);
  --on-secondary:           var(--m3-secondary-100);
  --secondary-container:    var(--m3-secondary-90);
  --on-secondary-container: var(--m3-secondary-10);

  --tertiary:               var(--m3-tertiary-40);
  --on-tertiary:            var(--m3-tertiary-100);
  --tertiary-container:     var(--m3-tertiary-90);
  --on-tertiary-container:  var(--m3-tertiary-10);

  --error:                  var(--m3-error-40);
  --on-error:               #FFFFFF;
  --error-container:        var(--m3-error-90);
  --on-error-container:     var(--m3-error-10);

  --success:                var(--m3-success-40);
  --success-container:      var(--m3-success-90);
  --on-success-container:   var(--m3-success-30);

  --warning:                var(--m3-warning-40);
  --warning-container:      var(--m3-warning-90);
  --on-warning-container:   var(--m3-warning-30);

  --background:             var(--m3-neutral-98);
  --on-background:          var(--m3-neutral-10);
  --surface:                var(--m3-neutral-99);
  --surface-dim:            var(--m3-neutral-87);
  --surface-bright:         var(--m3-neutral-98);
  --surface-container-lowest: var(--m3-neutral-100);
  --surface-container-low:  var(--m3-neutral-96);
  --surface-container:      var(--m3-neutral-94);
  --surface-container-high: var(--m3-neutral-92);
  --surface-container-highest: var(--m3-neutral-90);
  --on-surface:             var(--m3-neutral-10);
  --on-surface-variant:     var(--m3-nv-30);
  --outline:                var(--m3-nv-50);
  --outline-variant:        var(--m3-nv-80);

  /* === Type scale (M3 2024) === */
  --type-display-l: 600 57px/1.12 'Inter Tight', system-ui, sans-serif;
  --type-display-m: 600 45px/1.16 'Inter Tight', system-ui, sans-serif;
  --type-display-s: 600 36px/1.22 'Inter Tight', system-ui, sans-serif;
  --type-headline-l: 600 32px/1.25 'Inter Tight', system-ui, sans-serif;
  --type-headline-m: 600 28px/1.29 'Inter Tight', system-ui, sans-serif;
  --type-headline-s: 600 24px/1.33 'Inter Tight', system-ui, sans-serif;
  --type-title-l:    600 22px/1.27 'Inter', system-ui, sans-serif;
  --type-title-m:    600 16px/1.5 'Inter', system-ui, sans-serif;
  --type-title-s:    600 14px/1.43 'Inter', system-ui, sans-serif;
  --type-body-l:     400 16px/1.5 'Inter', system-ui, sans-serif;
  --type-body-m:     400 14px/1.43 'Inter', system-ui, sans-serif;
  --type-body-s:     400 12px/1.33 'Inter', system-ui, sans-serif;
  --type-label-l:    500 14px/1.43 'Inter', system-ui, sans-serif;
  --type-label-m:    500 12px/1.33 'Inter', system-ui, sans-serif;
  --type-label-s:    500 11px/1.45 'Inter', system-ui, sans-serif;

  /* Numerics — tabular */
  --type-numeric: 'Inter Tight', 'Inter', system-ui, sans-serif;

  /* Shape */
  --shape-xs: 4px;
  --shape-s: 8px;
  --shape-m: 12px;
  --shape-l: 16px;
  --shape-xl: 28px;
  --shape-2xl: 32px;
  --shape-full: 999px;

  /* Elevation (M3) */
  --elev-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --elev-2: 0 1px 2px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.05);
  --elev-3: 0 4px 8px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --elev-4: 0 6px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);

  /* Motion */
  --motion-fast:  150ms cubic-bezier(.2,0,0,1);
  --motion-mid:   250ms cubic-bezier(.2,0,0,1);
  --motion-slow:  400ms cubic-bezier(.2,0,0,1);
}

[data-theme="dark"] {
  --primary:                var(--m3-primary-80);
  --on-primary:             var(--m3-primary-20);
  --primary-container:      var(--m3-primary-30);
  --on-primary-container:   var(--m3-primary-90);

  --secondary:              var(--m3-secondary-80);
  --on-secondary:           var(--m3-secondary-20);
  --secondary-container:    var(--m3-secondary-30);
  --on-secondary-container: var(--m3-secondary-90);

  --tertiary:               var(--m3-tertiary-80);
  --on-tertiary:            var(--m3-tertiary-20);
  --tertiary-container:     var(--m3-tertiary-30);
  --on-tertiary-container:  var(--m3-tertiary-90);

  --error:                  var(--m3-error-80);
  --on-error:               var(--m3-error-20);
  /* Containers no dark mode — meio termo entre o vivo M3 e o apagado total */
  --error-container:        oklch(0.27 0.075 25);
  --on-error-container:     var(--m3-error-90);

  --success:                var(--m3-success-80);
  --success-container:      oklch(0.27 0.065 155);
  --on-success-container:   var(--m3-success-90);

  --warning:                var(--m3-warning-80);
  --warning-container:      oklch(0.27 0.07 80);
  --on-warning-container:   var(--m3-warning-90);

  --background:             var(--m3-neutral-6);
  --on-background:          var(--m3-neutral-90);
  --surface:                var(--m3-neutral-6);
  --surface-dim:            var(--m3-neutral-6);
  --surface-bright:         var(--m3-neutral-24);
  --surface-container-lowest: var(--m3-neutral-4);
  --surface-container-low:  var(--m3-neutral-10);
  --surface-container:      var(--m3-neutral-12);
  --surface-container-high: var(--m3-neutral-17);
  --surface-container-highest: var(--m3-neutral-22);
  --on-surface:             var(--m3-neutral-90);
  --on-surface-variant:     var(--m3-nv-80);
  --outline:                var(--m3-nv-60);
  --outline-variant:        var(--m3-nv-30);
}

/* === Reset / base === */
* { box-sizing: border-box; }
body { margin: 0; }

.cobra-app {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  color: var(--on-background);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

.cobra-num {
  font-family: var(--type-numeric);
  font-feature-settings: 'tnum', 'cv11';
  letter-spacing: -0.02em;
}

/* Material Symbols sizing */
.msym {
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
  user-select: none;
  font-size: 20px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.msym.filled { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }