/* =========================================================
   SyncDental — Design Tokens  (cópia de handoff/styles/tokens.css)
   Não editar este ficheiro directamente — editar tokens.css no handoff
   e depois copiar para cá.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Paper / ink / line ------------------------ */
  --sd-bg:           #FAF8F4;
  --sd-bg-raised:    #FFFFFF;
  --sd-bg-sunken:    #F2EFE8;
  --sd-bg-muted:     #F7F4ED;

  --sd-ink:          #1B1E22;
  --sd-ink-2:        #4A4F57;
  --sd-ink-3:        #7A808A;
  --sd-ink-4:        #ADB2BA;
  --sd-ink-on-dark:  #F4F1EA;
  --sd-ink-on-dark-2:#A5A8AF;

  --sd-line:         #E8E4DC;
  --sd-line-strong:  #D5D0C5;
  --sd-line-dark:    #3A3C42;

  /* ---------- Brand ------------------------------------- */
  --sd-orange:       #E8742A;
  --sd-orange-ink:   #C75D18;
  --sd-orange-soft:  #FBE1CD;
  --sd-orange-paper: #FDF1E5;

  --sd-charcoal:     #2D2E33;
  --sd-charcoal-ink: #1B1C20;
  --sd-charcoal-2:   #3A3C42;

  /* ---------- Clinical state colors --------------------- */
  --sd-state-healthy:       #B7D5B3;
  --sd-state-healthy-ink:   #3E6B3C;
  --sd-state-caries:        #C84A3C;
  --sd-state-caries-ink:    #8C2A20;
  --sd-state-restoration:   #1F6FB2;
  --sd-state-restoration-ink:#13507F;
  --sd-state-endo:          #6E44A6;
  --sd-state-endo-ink:      #4A2D70;
  --sd-state-crown:         #D4A017;
  --sd-state-crown-ink:     #8F6A0A;
  --sd-state-extracted:     #3A4149;
  --sd-state-extracted-ink: #1B1F23;
  --sd-state-implant:       #6B7A8F;
  --sd-state-implant-ink:   #42505F;
  --sd-state-bridge:        #C25FA0;
  --sd-state-bridge-ink:    #8A3E70;
  --sd-state-mobility:      #B8651C;
  --sd-state-mobility-ink:  #7C3F0E;
  --sd-state-fracture:      #000000;
  --sd-state-fracture-ink:  #000000;

  /* ---------- Semantic ---------------------------------- */
  --sd-success:      #2E8C57;
  --sd-success-soft: #D7EBDD;
  --sd-success-ink:  #1B5C3A;
  --sd-warning:      #C77A14;
  --sd-warning-soft: #FBE9C5;
  --sd-warning-ink:  #8A540A;
  --sd-danger:       #B4362A;
  --sd-danger-soft:  #F6D7D3;
  --sd-danger-ink:   #7C2018;
  --sd-info:         #1F6FB2;
  --sd-info-soft:    #D3E2F2;
  --sd-info-ink:     #13507F;

  /* ---------- Interaction ------------------------------- */
  --sd-focus:        var(--sd-orange);
  --sd-focus-ring:   0 0 0 2px var(--sd-bg), 0 0 0 4px var(--sd-orange);
  --sd-hover-tint:   rgba(27, 30, 34, 0.05);
  --sd-press-tint:   rgba(27, 30, 34, 0.09);
  --sd-selected-bg:  var(--sd-orange-paper);

  /* ---------- Shadows ----------------------------------- */
  --sd-shadow-1: 0 1px 2px rgba(27,30,34,0.04), 0 2px 8px rgba(27,30,34,0.05);
  --sd-shadow-2: 0 4px 12px rgba(27,30,34,0.07), 0 12px 32px rgba(27,30,34,0.08);
  --sd-shadow-pop: 0 8px 24px rgba(27,30,34,0.12), 0 2px 4px rgba(27,30,34,0.06);
  --sd-inset-1:  inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(27,30,34,0.04);

  /* ---------- Radius ------------------------------------ */
  --sd-radius-xs:   2px;
  --sd-radius-sm:   4px;
  --sd-radius-md:   6px;
  --sd-radius-lg:   8px;
  --sd-radius-xl:   12px;
  --sd-radius-pill: 999px;

  /* ---------- Spacing (4 px grid) ----------------------- */
  --sd-s-1:  4px;
  --sd-s-2:  8px;
  --sd-s-3:  12px;
  --sd-s-4:  16px;
  --sd-s-5:  20px;
  --sd-s-6:  24px;
  --sd-s-7:  32px;
  --sd-s-8:  48px;
  --sd-s-9:  64px;

  /* ---------- Typography -------------------------------- */
  --sd-font-sans:  'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sd-font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --sd-t-display: 700 36px/1.1   var(--sd-font-sans);
  --sd-t-h1:      600 26px/1.18  var(--sd-font-sans);
  --sd-t-h2:      600 20px/1.25  var(--sd-font-sans);
  --sd-t-h3:      600 16px/1.3   var(--sd-font-sans);
  --sd-t-h4:      600 14px/1.35  var(--sd-font-sans);
  --sd-t-body:    400 14px/1.5   var(--sd-font-sans);
  --sd-t-body-sm: 400 13px/1.45  var(--sd-font-sans);
  --sd-t-label:   500 12px/1.3   var(--sd-font-sans);
  --sd-t-caption: 400 12px/1.4   var(--sd-font-sans);
  --sd-t-mono:    400 12px/1.45  var(--sd-font-mono);

  --sd-tracking-tight: -0.01em;
  --sd-tracking-wide:  0.04em;

  /* ---------- Motion ------------------------------------ */
  --sd-ease:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --sd-dur-1: 120ms;
  --sd-dur-2: 180ms;
  --sd-dur-3: 240ms;

  /* ---------- Layout ------------------------------------ */
  --sd-sidebar-w:          220px;
  --sd-sidebar-w-compact:  64px;
  --sd-topbar-h:           56px;
  --sd-content-max:        1440px;
}

html, body {
  background: var(--sd-bg);
  color: var(--sd-ink);
  font: var(--sd-t-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 { color: var(--sd-ink); margin: 0; letter-spacing: var(--sd-tracking-tight); }
h1 { font: var(--sd-t-h1); }
h2 { font: var(--sd-t-h2); }
h3 { font: var(--sd-t-h3); }
h4 { font: var(--sd-t-h4); }
p  { font: var(--sd-t-body); color: var(--sd-ink-2); margin: 0; }
small, .sd-caption { font: var(--sd-t-caption); color: var(--sd-ink-3); }

a { color: var(--sd-orange-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

hr { border: 0; border-top: 1px solid var(--sd-line); margin: var(--sd-s-5) 0; }

code, kbd {
  font: var(--sd-t-mono);
  background: var(--sd-bg-sunken);
  padding: 1px 5px;
  border-radius: var(--sd-radius-xs);
  border: 1px solid var(--sd-line);
  color: var(--sd-ink-2);
}

.sd-tabular { font-variant-numeric: tabular-nums; }
.sd-display  { font: var(--sd-t-display); letter-spacing: var(--sd-tracking-tight); }

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--sd-focus-ring);
  border-radius: var(--sd-radius-sm);
}

::selection { background: var(--sd-orange-soft); color: var(--sd-ink); }