/* MyDoc — especificação comum, derivada da referência fornecida. */


:root {
  
  --brand: #0036ff;
  --brand-hover: #0730e0;
  --brand-active: #061db6;
  --brand-contrast: #ffffff;
  --brand-ghost: #0036ff14;
  --brand-muted: #0036ff29;

  
  --font-title: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  
  --text-display: 40px;   --lh-display: 46px;   --ls-display: -0.8px;
  --text-h1:      32px;   --lh-h1:      38px;   --ls-h1:      -0.64px;
  --text-h2:      24px;   --lh-h2:      30px;   --ls-h2:      -0.48px;
  --text-h3:      20px;   --lh-h3:      26px;   --ls-h3:      -0.3px;
  --text-h4:      16px;   --lh-h4:      22px;   --ls-h4:      -0.16px;

  --text-lg:      16px;   --lh-lg:      26px;   --ls-lg:      0;
  --text-base:    14px;   --lh-base:    22px;   --ls-base:    0;
  --text-sm:      12px;   --lh-sm:      18px;   --ls-sm:      0;

  --label-lg:     16px;   --lh-label-lg:  26px; --ls-label-lg:  -0.16px;
  --label-base:   14px;   --lh-label:     22px; --ls-label:     -0.14px;
  --label-sm:     12px;   --lh-label-sm:  18px; --ls-label-sm:  -0.12px;

  --text-mono:    11px;   --lh-mono:      16px; --ls-mono:      0.33px;

  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;

  
  --sp-1: 2px;   --sp-2: 4px;   --sp-3: 6px;   --sp-4: 8px;
  --sp-5: 10px;  --sp-6: 12px;  --sp-7: 16px;  --sp-8: 20px;
  --sp-9: 24px;  --sp-10: 32px; --sp-11: 40px; --sp-12: 48px;
  --sp-13: 64px; --sp-14: 80px;

  
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 24px;
  --r-full: 999px;

  
  
  --ease:        cubic-bezier(.6, .6, 0, 1);
  --ease-inout:  cubic-bezier(.76, 0, .24, 1);
  --ease-bounce: cubic-bezier(.87, -.41, .19, 1.44);

  --dur-instant: 50ms;   
  --dur-fast:    200ms;  
  --dur-slow:    400ms;
  --dur-slower:  800ms;

  
  --sidebar-w: 248px;
  --topbar-h: 56px;
  --content-max: 1240px;
}


:root,
:root[data-theme='light'] {
  color-scheme: light;

  --bg:            #ffffff;
  --bg-subtle:     #fafafa;
  --bg-sunken:     #f4f4f5;
  --bg-ghost:      #37373707;
  --bg-muted:      #3737371f;
  --bg-elevated:   #ffffff;

  --loud:          #141414;   
  --muted:         #656565;   
  
  --ghost:         #767676;

  --stroke-lighter: #1616160f;
  --stroke:         #1616161f;
  --stroke-strong:  #16161633;

  --success:       #0d8259;   
  --success-bg:    #0d825914;
  --warning:       #b45f10;
  --warning-bg:    #f7994229;   
  --danger:        #d13438;
  --danger-bg:     #d1343814;
  --info:          #0036ff;
  --info-bg:       #0036ff14;

  
  --shadow-sm:
    0 1px 1px -.5px #08011408,
    0 .5px .5px #08011408;
  --shadow-md:
    0 8px 8px -3px #0000000a,
    0 3px 3px -1.5px #0000000a,
    0 2px 2px -1px #00000008,
    0 1px 1px -.5px #00000008,
    0 .5px .5px #00000008;
  --shadow-lg:
    0 12px 12px -3px #0000000a,
    0 6px 6px -3px #00000005,
    0 3px 3px -1.5px #00000005,
    0 1px 1px -.5px #00000008,
    0 0 0 1px #0000000a;
  --shadow-xl:
    0 1px 2px #00000014,
    0 4px 16px #00000014,
    0 16px 56px #00000014;

  
  --btn-primary-bg: var(--brand);
  --btn-primary-shadow:
    0 1px 2px -.5px #ffffff1f inset,
    0 .5px .5px #ffffff29 inset,
    0 8px 24px -4px #ffffff29 inset,
    0 8px 8px -3px #09011408,
    0 5px 5px -2.5px #09011408,
    0 3px 3px -1.5px #08011408,
    0 2px 2px -1px #08011408,
    0 1px 1px -.5px #08011408;

  --btn-neutral-bg: #fffffff5;
  --btn-neutral-shadow:
    0 8px 8px -3px #0000000a,
    0 3px 3px -1.5px #0000000a,
    0 2px 2px -1px #00000008,
    0 1px 1px -.5px #00000008,
    0 .5px .5px #00000008,
    0 0 0 1px #0000000a;

  --overlay: #08011452;
}


:root[data-theme='dark'] {
  color-scheme: dark;

  --bg:            #08080b;
  --bg-subtle:     #0e0e13;
  --bg-sunken:     #050507;
  --bg-ghost:      #ffffff0a;
  --bg-muted:      #ffffff14;
  --bg-elevated:   #131319;

  --loud:          #ffffffe6;
  --muted:         #ffffff99;
  --ghost:         #ffffff7a;   

  --stroke-lighter: #ffffff14;
  --stroke:         #ffffff1f;
  --stroke-strong:  #ffffff33;

  --success:       #3ddc97;
  --success-bg:    #3ddc9714;
  --warning:       #f79942;
  --warning-bg:    #f7994229;
  --danger:        #ff6369;
  --danger-bg:     #ff636914;
  --info:          #6b8cff;
  --info-bg:       #6b8cff14;

  --brand-ghost:   #0036ff29;
  --brand-muted:   #0036ff3d;

  --shadow-sm:
    0 1px 1px -.5px #00000052,
    0 .5px .5px #00000052;
  --shadow-md:
    0 8px 8px -3px #00000052,
    0 3px 3px -1.5px #00000052,
    0 2px 2px -1px #0000003d,
    0 1px 1px -.5px #0000003d;
  --shadow-lg:
    0 12px 12px -3px #00000066,
    0 6px 6px -3px #00000052,
    0 3px 3px -1.5px #0000003d,
    0 0 0 1px #ffffff0f;
  --shadow-xl:
    0 1px 2px #00000080,
    0 4px 16px #00000080,
    0 16px 56px #00000099;

  --btn-primary-bg: var(--brand);
  --btn-primary-shadow:
    0 1px 2px -.5px #ffffff29 inset,
    0 .5px .5px #ffffff3d inset,
    0 8px 24px -4px #ffffff29 inset,
    0 8px 8px -3px #0000003d,
    0 3px 3px -1.5px #0000003d,
    0 1px 1px -.5px #00000052;

  
  --btn-neutral-bg: #ffffff0a;
  --btn-neutral-shadow:
    0 -4px 12px -4px #ffffff14 inset,
    0 1px 3px #ffffff0f inset,
    0 .5px .5px #ffffff1f inset,
    0 8px 8px -3px #0901140f,
    0 3px 3px -1.5px #0801140f,
    0 1px 1px -.5px #08011408;

  --overlay: #00000099;
}


@media (prefers-color-scheme: dark) {
  :root[data-theme='system'] {
    color-scheme: dark;

    --bg:            #08080b;
    --bg-subtle:     #0e0e13;
    --bg-sunken:     #050507;
    --bg-ghost:      #ffffff0a;
    --bg-muted:      #ffffff14;
    --bg-elevated:   #131319;

    --loud:          #ffffffe6;
    --muted:         #ffffff99;
    --ghost:         #ffffff7a;   

    --stroke-lighter: #ffffff14;
    --stroke:         #ffffff1f;
    --stroke-strong:  #ffffff33;

    --success:       #3ddc97;
    --success-bg:    #3ddc9714;
    --warning:       #f79942;
    --warning-bg:    #f7994229;
    --danger:        #ff6369;
    --danger-bg:     #ff636914;
    --info:          #6b8cff;
    --info-bg:       #6b8cff14;

    --brand-ghost:   #0036ff29;
    --brand-muted:   #0036ff3d;

    --shadow-sm: 0 1px 1px -.5px #00000052, 0 .5px .5px #00000052;
    --shadow-md: 0 8px 8px -3px #00000052, 0 3px 3px -1.5px #00000052,
                 0 2px 2px -1px #0000003d, 0 1px 1px -.5px #0000003d;
    --shadow-lg: 0 12px 12px -3px #00000066, 0 6px 6px -3px #00000052,
                 0 3px 3px -1.5px #0000003d, 0 0 0 1px #ffffff0f;
    --shadow-xl: 0 1px 2px #00000080, 0 4px 16px #00000080, 0 16px 56px #00000099;

    --btn-primary-shadow:
      0 1px 2px -.5px #ffffff29 inset, 0 .5px .5px #ffffff3d inset,
      0 8px 24px -4px #ffffff29 inset, 0 8px 8px -3px #0000003d,
      0 3px 3px -1.5px #0000003d, 0 1px 1px -.5px #00000052;
    --btn-neutral-bg: #ffffff0a;
    --btn-neutral-shadow:
      0 -4px 12px -4px #ffffff14 inset, 0 1px 3px #ffffff0f inset,
      0 .5px .5px #ffffff1f inset, 0 8px 8px -3px #0901140f,
      0 3px 3px -1.5px #0801140f, 0 1px 1px -.5px #08011408;

    --overlay: #00000099;
  }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}